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

.cookie-bar {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    /* Reemplazamos el blur intenso por un color sólido semitransparente para salvar rendimiento */
    background: rgba(10, 10, 10, 0.98); 
    border-top: 1px solid var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    box-sizing: border-box;
    z-index: 100000;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.8);
    font-family: 'Segoe UI', Arial, sans-serif;
    transform: translateZ(0); /* <-- Fuerza la aceleración por hardware */
}

.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: 23px;    /* ✅ 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;
    padding-left: 100%;
    animation: scrollMarquee 50s linear infinite;
    font-family: 'Orbitron', sans-serif; 
    font-size: 18px;
    font-weight: bold;
    color: var(--accent);
    text-shadow: 1px 1px 3px #000;
    line-height: 32px; 
    will-change: transform; /* <-- Le avisa al navegador que se moverá, optimizando RAM */
    transform: translateZ(0); /* <-- Fuerza uso de tarjeta gráfica */
}

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

/* 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; 
    --accent-color: var(--neon-color, var(--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; 
    color-scheme: dark; /* ¡MAGIA! Le dice al navegador que renderice en oscuro por defecto */
    background-color: var(--bg); /* Evita el flashazo inicial */
}

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; 
    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 .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 { 
    color: #111; 
}

body.light-mode .subscription-plans-section { background-color: var(--accent); color: #111; }
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 .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: #000000; 
    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: var(--accent) !important; 
    border-color: var(--accent) !important; 
    text-shadow: none; 
    box-shadow: 0 0 5px var(--accent); 
    background-color: #000 !important;
}

body.light-mode .btn-neon-gray:visited { 
    color: var(--accent) !important; 
}

body.light-mode .btn-neon-gray:hover { 
    background-color: var(--accent) !important; 
    color: #ffffff !important; 
    box-shadow: 0 0 15px var(--accent);
}
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 { color: #7b7b7b; }
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 #emojiPickerModal, body.light-mode #tipsPickerModal { background: #fff !important; border-color: #ccc !important; }
body.light-mode .dmca-textarea { background: #fff; color: #111; border-color: #ccc; }

/* Quitar definitivamente cualquier marco residual de los banners */
.side-col-banner, 
.b-728, 
.b-250, 
.b-square {
    border: none !important;
    outline: none !important;
}

/* =========================================================================
   CORRECCIÓN DE CONTRASTE: TEMA GRIS Y TONOS CLAROS EN MODO DÍA
   ========================================================================= */

/* Cuando se activa el tema Gris (theme-gray), el color claro se sustituye 
   por un gris grafito oscuro para que destaque limpio sobre la barra blanca */
body.light-mode.theme-gray .header-logo-text,
body.light-theme.theme-gray .header-logo-text,
body.light-mode.theme-gray .mid-link,
body.light-theme.theme-gray .mid-link {
    color: #222222 !important;
    text-shadow: none !important;
}

/* Si el tema azul se ve demasiado claro en modo día, le damos un tono con mejor pegada */
body.light-mode.theme-blue .header-logo-text,
body.light-theme.theme-blue .header-logo-text,
body.light-mode.theme-blue .mid-link,
body.light-theme.theme-blue .mid-link {
    color: #0099cc !important; /* Azul más contrastado y nítido para fondo blanco */
    text-shadow: none !important;
}

/* 4. Botón de LOGIN destacado en bloque NEGRO sólido sobre el fondo blanco */
body.light-mode .login-link,
body.light-theme .login-link {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border: 1px solid #222222 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    text-shadow: none !important;
}

body.light-mode .login-link:hover,
body.light-theme .login-link:hover {
    background: var(--neon-color, #bc13fe) !important;
    background-color: var(--neon-color, #bc13fe) !important;
    color: #ffffff !important;
    border-color: var(--neon-color, #bc13fe) !important;
    box-shadow: 0 4px 15px rgba(188, 19, 254, 0.4) !important;
}

/* 5. Botones de herramientas e iconos (martillo, tema, etc.) en tono gris suave */
body.light-mode header .theme-btn,
body.light-theme header .theme-btn {
    background: #f0f0f0 !important;
    border: 1px solid #cccccc !important;
    color: #333333 !important;
}

.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; }

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

/* =========================================================================
   SISTEMA DE DISEÑO UNIFICADO: SELECTOR Y MENÚ DE IDIOMAS
   ========================================================================= */

/* 1. Botón selector base (Modo Noche por defecto) */
.custom-select-container,
#currentLang {
    background: rgba(13, 13, 13, 0.95) !important;
    border: 1px solid var(--accent, #00e5ff) !important;
    border-radius: 20px !important;
    color: var(--accent, #00e5ff) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important;
    transition: all 0.3s ease !important;
}

.custom-select-container:hover,
#currentLang:hover {
    box-shadow: 0 0 12px var(--accent, rgba(0, 229, 255, 0.4)) !important;
}

/* 2. Marco exterior del menú desplegable (Efecto reborde de la captura) */
.custom-options,
#langOptions {
    background: #141414 !important;
    border: 1px solid var(--accent, #00e5ff) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95) !important;
    z-index: 2147483647 !important;
    scrollbar-color: var(--accent, #00e5ff) #141414 !important;
    padding: 6px !important;               /* Reborde exterior uniforme */
    box-sizing: border-box !important;
}

/* Contenedor interno de los idiomas */
#langItemsList {
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;                  /* Separación nítida entre tarjetas */
    margin-top: 4px !important;
}

/* 3. Tarjeta individual de idioma en Modo Noche */
.lang-option-item {
    background: #202020 !important;        /* Fondo independiente para cada idioma */
    color: #ffffff !important;             /* Texto blanco nítido */
    font-family: 'Orbitron', sans-serif !important;
    font-size: 11px !important;
    padding: 9px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    text-align: center !important;
    user-select: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease !important;
}

/* 4. Estado seleccionado / hover en Modo Noche (Solo se ilumina este elemento) */
.lang-option-item:hover {
    background: var(--accent, #00e5ff) !important;  /* Toma el color activo */
    color: #000000 !important;                      /* Letras negras para máximo contraste */
    font-weight: bold !important;
    transform: scale(0.98) !important;
}

/* =========================================================================
   CONDICIÓN ESPECIAL: MODO DÍA (ESTILO IDÉNTICO A LA CAPTURA)
   ========================================================================= */
body.light-mode .custom-select-container,
body.light-theme .custom-select-container,
body.light-mode #currentLang,
body.light-theme #currentLang {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #cccccc !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Marco exterior en modo día */
body.light-mode .custom-options,
body.light-theme .custom-options,
body.light-mode #langOptions,
body.light-theme #langOptions {
    background: #a0a0a0 !important;        /* Marco grisáceo de fondo como en la captura */
    border: 1px solid #999999 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    scrollbar-color: #666666 #a0a0a0 !important;
}

/* Tarjetas individuales de idiomas en Modo Día */
body.light-mode .lang-option-item,
body.light-theme .lang-option-item {
    background: #ffffff !important;        /* Tarjeta blanca como en la foto */
    color: #000000 !important;             /* Letra negra nítida */
}

/* Elemento seleccionado / hover en Modo Día (Efecto de la captura) */
body.light-mode .lang-option-item:hover,
body.light-theme .lang-option-item:hover {
    background: #777777 !important;        /* Fondo gris destacado */
    color: #ffffff !important;             /* Letra blanca nítida */
    font-weight: bold !important;
}

/* =========================================================================
   CONDICIÓN ESPECIAL: TEMA NEON GRAY (Letras negras para contraste)
   ========================================================================= */
body.theme-gray .custom-select-container,
body.theme-gray #currentLang {
    color: #000000 !important;
    border-color: #999999 !important;
    background: rgba(204, 204, 204, 0.9) !important;
}

body.theme-gray .custom-options div,
body.theme-gray #langOptions div {
    color: #cccccc !important;
}

body.theme-gray .custom-options div:hover,
body.theme-gray #langOptions div:hover {
    background: #cccccc !important;
    color: #000000 !important;
}

/* =========================================================================
   CONDICIÓN ESPECIAL: MODO DÍA (Lista blanca y botón blanco)
   ========================================================================= */
body.light-mode .custom-select-container,
body.light-theme .custom-select-container,
body.light-mode #currentLang,
body.light-theme #currentLang {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #cccccc !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .custom-options,
body.light-theme .custom-options,
body.light-mode #langOptions,
body.light-theme #langOptions {
    background: #ffffff !important; /* Lista blanca en modo día */
    border: 1px solid #cccccc !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    scrollbar-color: #999999 #ffffff !important;
}

body.light-mode .custom-options div,
body.light-theme .custom-options div,
body.light-mode #langOptions div,
body.light-theme #langOptions div {
    color: #222222 !important; /* Texto oscuro sobre fondo blanco */
    border-bottom: 1px solid #eeeeee !important;
}

body.light-mode .custom-options div:hover,
body.light-theme .custom-options div:hover,
body.light-mode #langOptions div:hover,
body.light-theme #langOptions div:hover {
    background: var(--accent, #111111) !important;
    color: #ffffff !important;
}

body {
    top: 0px !important;
}

/* Botones individuales de opciones dentro del desplegable */
.theme-btn { 
    width: 30px !important; 
    height: 30px !important; 
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #000000 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 1.5px solid var(--accent-color) !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--accent-color) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: transform 0.2s, border-color 0.2s;
}

/* Botón X de cierre de menús exclusivo para móvil (oculto en escritorio) */
.close-btn-mobile,
.dropdown-close-btn,
.profile-dropdown-content.mega-menu .close-btn-mobile,
.profile-dropdown-content.mega-menu .dropdown-close-btn {
    display: none !important;
}

/* =========================================================================
   OCULTAR CUADRÍCULA (⊞) Y BOTÓN MAC (🖥️) EN ESCRITORIO (PC > 960px)
   ========================================================================= */
@media screen and (min-width: 961px) {
    #btnQuickGridClose,
    #btnQuickDesktopMenu,
    button[title*="Grid"],
    .mobile-grid-toggle-btn {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================================================
   ESTRUCTURA STICKY FOOTER (Fuerza el footer a la parte inferior de la pantalla)
   ========================================================================= */

/* 1. Preparamos el html y el body para ocupar siempre el 100% de la ventana */
html, body {
    height: 100%;
    margin: 0;
}

/* 2. Convertimos el body en un contenedor flexible en forma de columna */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el body mida como mínimo la altura de tu pantalla */
}

/* 3. El truco mágico: Forzamos al footer a irse al fondo empujando el espacio vacío */
footer, 
.footer-container, 
#footer {
    margin-top: auto !important; 
    flex-shrink: 0; /* Evita que el footer se aplaste */
}

/* =========================================================================
   BLINDAJE EXTRA PARA EL MEGA MENÚ (Por si estuviera empujando desde abajo)
   ========================================================================= */
.profile-dropdown-content.mega-menu:not(.open):not(:hover) {
    display: none !important; /* Si no está abierto o no tiene el ratón encima, desaparece del todo */
}

/* --- 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; }
/* --- COLUMNAS LATERALES ENSANCHADAS A 160PX (TAMAÑO ESTÁNDAR) --- */
.side-col-stack { width: 160px; min-width: 160px; display: flex; flex-direction: column; gap: var(--gap); margin: 0 var(--out-margin); flex-shrink: 0; }
.side-col-banner { width: 160px; 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; }

/* Ajuste total del iframe dentro del banner lateral */
.side-col-banner iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: 160px !important;
    max-height: 728px !important;
    border: none !important;
    outline: none !important;
    display: block !important;
    background-color: #000 !important;
    color-scheme: dark;
    overflow: hidden !important;
}

/* Forzar que cualquier imagen encaje 100% a lo ancho sin recortarse (contain) */
.side-col-banner img,
.side-col-banner a {
    width: 100% !important;
    height: 100% !important;
    max-width: 160px !important;
    max-height: 728px !important;
    object-fit: contain !important; /* <--- Esto evita que la foto haga zoom y se ampute */
    display: block !important;
}

.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 HORIZONTALES --- */
.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-color: #000 !important; /* Fondo negro estricto */
    border: 1px solid #333; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 15px; 
    flex-shrink: 0; 
}

/* Forzar fondo oscuro y ajuste dimensional en iframes horizontales */
.b-728 iframe, .b-250 iframe, .b-square iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    outline: none !important;
    display: block !important;
    background-color: #000 !important;
    color-scheme: dark;
}

.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 #remoteVideoContainer { height: 100%; flex: none; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; }
.focus-active #localVideoContainer { 
    width: 260px !important; 
    height: 195px !important; 
    flex: none; 
    position: absolute !important; 
    bottom: 25px !important; 
    right: 25px !important; 
    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: 20px 20px; margin: 16px 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 { 
    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-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 {
    border: 1px solid #333;
    padding: 8px 18px;
    border-radius: 20px; 
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}

.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 {
    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 --- */
footer {
    width: 100%;
    background: rgb(15, 15, 15); /* Color sólido oscuro sin transparencias raras */
    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;
}

    /* 2. Barra de scroll SIEMPRE VISIBLE y clavada para el buscador de calles */
    #roamingSuggestionsList {
        scrollbar-width: auto !important; /* Para Firefox */
        scrollbar-color: #00ffcc #111111 !important;
        overflow-y: scroll !important; /* Obliga a que el carril del scroll esté siempre fijo */
    }
    #roamingSuggestionsList::-webkit-scrollbar {
        width: 10px !important;
        display: block !important;
    }
    #roamingSuggestionsList::-webkit-scrollbar-track {
        background: #111111 !important;
        border-left: 1px solid #333333 !important;
    }
    #roamingSuggestionsList::-webkit-scrollbar-thumb {
        background: #00ffcc !important;
        border-radius: 5px !important;
        border: 2px solid #111111 !important;
    }

    /* 3. Protección para que los estilos de tu web no rompan las imágenes del mapa */
    #roamingMapContainer {
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        display: block !important;
        position: relative !important;
        z-index: 10;
        background: #1a1a1a !important;
    }
    #roamingMapContainer .leaflet-pane,
    #roamingMapContainer .leaflet-tile,
    #roamingMapContainer .leaflet-marker-icon,
    #roamingMapContainer .leaflet-marker-shadow {
        max-width: none !important;
        max-height: none !important;
    }

    /* Contenedor de sugerencias flotante alineado con tu CSS base */
    #roamingSuggestionsBox {
        display: none;
        position: absolute !important; /* Lo hacemos flotante absoluto */
        top: 42px !important;         /* Justo debajo de la barra de búsqueda sin dejar huecos */
        left: 0 !important;
        width: calc(100% - 75px) !important; /* Deja espacio exacto para el botón SEARCH */
        max-height: 200px !important;
        min-height: 40px !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        background: #080808 !important;
        border: 1px solid #00ffcc !important;
        border-radius: 6px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        z-index: 1005;
        box-shadow: 0 10px 25px rgba(0,0,0,0.95) !important;
    }

    /* Forzar que el carril y el tirador del scroll estén siempre pintados y visibles */
    #roamingSuggestionsBox::-webkit-scrollbar {
        width: 12px !important;
        display: block !important;
        visibility: visible !important;
    }
    #roamingSuggestionsBox::-webkit-scrollbar-track {
        background: #161616 !important; /* Fondo sólido del carril para que nunca sea transparente */
        border-left: 1px solid #282828 !important;
        border-radius: 0 6px 6px 0 !important;
    }
    #roamingSuggestionsBox::-webkit-scrollbar-thumb {
        background: #00ffcc !important; /* Tirador verde neón fijo */
        border-radius: 6px !important;
        border: 2px solid #161616 !important;
    }

    /* Contenedor del mapa con filtro de modo oscuro integrado (Sin claves de API) */
    #roamingMapContainer {
        width: 100% !important;
        height: 210px !important;
        border-radius: 8px !important;
        border: 1px solid #00ffcc !important;
        margin-top: 4px !important;
        overflow: hidden !important;
        background: #0b0b0b !important;
    }
    
    /* Filtro CSS para transformar el mapa en modo oscuro manteniendo las letras y nombres legibles */
    #roamingMapContainer .leaflet-layer,
    #roamingMapContainer .leaflet-control-zoom,
    #roamingMapContainer .leaflet-attribution-control {
        filter: brightness(0.85) invert(100%) hue-rotate(180deg) contrast(110%) !important;
    }

/* =========================================================================
   UNIFICACIÓN DE ESPACIADOS VERTICALES A 16px (BASADO EN --gap)
   ========================================================================= */

/* Unificamos todas las secciones principales para que usen exactamente 16px de separación */
.pricing-wrap,
.faq-section,
.news-section {
    margin-top: var(--gap, 16px) !important;
    margin-bottom: var(--gap, 16px) !important;
}

/* Unificamos los contenedores de banners horizontales para que respiren con el mismo 16px */
.banner-wrapper {
    margin-top: var(--gap, 16px) !important;
    margin-bottom: var(--gap, 16px) !important;
}

/* Forzamos a cero cualquier relleno o margen interno que esté creando el hueco superior */
.banner-wrapper:has(.b-square) {
    margin-top: var(--gap, 16px) !important;
    margin-bottom: var(--gap, 16px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important; /* Elimina cualquier espacio de línea fantasma */
}

/* Limpiamos las cajas individuales de los cuadrados */
.b-square {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. Píldora Superboost/ActiveNow (Arriba de Rules) */
#promoSystemContainer {
    position: fixed !important;
    top: auto !important;
    bottom: 122px !important;
    right: 30px !important;
    left: auto !important;
    width: 42px !important;
    height: 75px !important;
    transform: scale(0.75) !important;
    transform-origin: center center !important;
    z-index: 2147483640 !important;
}

/* ------------------------------------------------------------------------- */
/* MODO NOCHE (Por defecto)                                                  */
/* ------------------------------------------------------------------------- */

/* Botones de Filtro (Todas, Créditos, etc.): Fondo negro, borde accent, texto gris */
.faq-filter-btn {
    background-color: #111111 !important;
    border: 1px solid var(--accent, #00e5ff) !important;
    color: #aaaaaa !important;
    transition: all 0.3s ease !important;
}

/* Filtro Seleccionado (Activo): Fondo accent, texto negro para contraste máximo */
.faq-filter-btn.active-filter,
.faq-filter-btn:hover {
    background-color: var(--accent, #00e5ff) !important;
    color: #000000 !important;
    border-color: var(--accent, #00e5ff) !important;
}

/* Tarjetas FAQ (Fondo oscuro, texto blanco) */
.faq-item {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
}
.faq-item h4,
.faq-item p {
    color: #ffffff !important;
}

/* Botones "Ver más / Ver menos": Fondo negro, letras accent */
#btnLoadMoreFaq, 
#btnLoadLessFaq {
    background-color: #111111 !important;
    color: var(--accent, #00e5ff) !important;
    border: 1px solid var(--accent, #00e5ff) !important;
    transition: all 0.3s ease !important;
}
#btnLoadMoreFaq:hover, 
#btnLoadLessFaq:hover {
    background-color: var(--accent, #00e5ff) !important;
    color: #000000 !important;
    border-color: #000000 !important; /* Reborde negro añadido */
}

/* ------------------------------------------------------------------------- */
/* MODO DÍA (body.day-mode o [data-theme="light"])                           */
/* ------------------------------------------------------------------------- */

/* Filtros en Día: Fondo blanco/gris, texto negro. El activo pasa a Accent. */
body.day-mode .faq-filter-btn,
[data-theme="light"] .faq-filter-btn {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #111111 !important;
}
body.day-mode .faq-filter-btn.active-filter,
body.day-mode .faq-filter-btn:hover,
[data-theme="light"] .faq-filter-btn.active-filter,
[data-theme="light"] .faq-filter-btn:hover {
    background-color: var(--accent, #00e5ff) !important;
    border-color: var(--accent, #00e5ff) !important;
    color: #000000 !important;
}

/* Tarjetas FAQ en Día: Fondo gris, letras en negro */
body.day-mode .faq-item,
[data-theme="light"] .faq-item {
    background-color: #f0f0f0 !important; /* El gris que pediste para la tarjeta */
    border: 1px solid #dddddd !important;
}
body.day-mode .faq-item h4,
body.day-mode .faq-item p,
[data-theme="light"] .faq-item h4,
[data-theme="light"] .faq-item p {
    color: #111111 !important;
}

/* Botones "Ver más" en Día: Letras en negro, y al hacer hover el reborde negro */
body.day-mode #btnLoadMoreFaq, 
body.day-mode #btnLoadLessFaq,
[data-theme="light"] #btnLoadMoreFaq, 
[data-theme="light"] #btnLoadLessFaq {
    background-color: #e5e5e5 !important;
    color: #111111 !important;
    border: 1px solid #cccccc !important;
}
body.day-mode #btnLoadMoreFaq:hover, 
body.day-mode #btnLoadLessFaq:hover,
[data-theme="light"] #btnLoadMoreFaq:hover, 
[data-theme="light"] #btnLoadLessFaq:hover {
    background-color: #d5d5d5 !important;
    color: #000000 !important;
    border-color: #000000 !important; /* Reborde negro mantenido */
}

/* ========================================================================= */
/* NOTICIAS: BOTONES VER MÁS / VER MENOS (MODO NOCHE)                        */
/* ========================================================================= */

/* Estado normal (Modo Noche): Texto negro y borde negro */
#btnLoadMoreNews, 
#btnLoadLessNews {
    color: #000000 !important;
    border-color: #000000 !important;
    transition: all 0.3s ease !important;
}

/* Estado normal: Texto negro y borde negro */
button#btnLoadMoreNews, 
button#btnLoadLessNews {
    background-color: #000000;
    color: var(--accent, #000000) !important;
    border: 1px solid #000000 !important;
    transition: all 0.3s ease !important;
}

/* Hover: Le quitamos el borde (transparente para que el botón no dé saltos de tamaño) */
button#btnLoadMoreNews:hover, 
button#btnLoadLessNews:hover {
    border-color: black !important;
    color: #000000 !important;
    background-color: var(--accent, #000000) !important;
}

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

/* ========================================================================= */
/* MOTOR UNIVERSAL: FONDOS, MODALES, BANNERS Y LOGOS                         */
/* ========================================================================= */

/* 1. IMÁGENES SEGÚN TEMA Y MODO DÍA/NOCHE */
:root, body { --theme-pattern: url('/roulette/images/theme_violet.webp'); }
body.light-mode, body.light-theme { --theme-pattern: url('/roulette/images/theme_violet_w.webp'); }

body.theme-gray { --theme-pattern: url('/roulette/images/theme_gray.webp'); }
body.theme-gray.light-mode, body.theme-gray.light-theme { --theme-pattern: url('/roulette/images/theme_gray_w.webp'); }

body.theme-violet { --theme-pattern: url('/roulette/images/theme_violet.webp'); }
body.theme-violet.light-mode, body.theme-violet.light-theme { --theme-pattern: url('/roulette/images/theme_violet_w.webp'); }

body.theme-blue { --theme-pattern: url('/roulette/images/theme_blue.webp'); }
body.theme-blue.light-mode, body.theme-blue.light-theme { --theme-pattern: url('/roulette/images/theme_blue_w.webp'); }

body.theme-pink { --theme-pattern: url('/roulette/images/theme_pink.webp'); }
body.theme-pink.light-mode, body.theme-pink.light-theme { --theme-pattern: url('/roulette/images/theme_pink_w.webp'); }

/* ORO (Al hacer login o al elegir Gold) */
body.logged-in:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink),
body.is-authenticated:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink),
body.theme-gold { --theme-pattern: url('/roulette/images/theme_gold.webp'); }

body.logged-in.light-mode:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink),
body.logged-in.light-theme:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink),
body.is-authenticated.light-mode:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink),
body.is-authenticated.light-theme:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink),
body.theme-gold.light-mode, body.theme-gold.light-theme { --theme-pattern: url('/roulette/images/theme_gold_w.webp'); }

/* 2. BASE NEGRA EN NOCHE Y BLANCA EN DÍA + VELO ACCENT 96% TRANSPARENTE */
html { background-color: #000000 !important; }
html:has(body.light-mode), html:has(body.light-theme) { background-color: #ffffff !important; }

body { 
    background-color: color-mix(in srgb, var(--accent, #bc13fe) 4%, transparent) !important; 
}
body.light-mode, body.light-theme { 
    background-color: color-mix(in srgb, var(--accent, #bc13fe) 2%, transparent) !important; 
    color: #111111 !important; 
}

/* ========================================================================= */
/* MOTOR DEFINITIVO: VALORES EXACTOS AJUSTADOS (DÍA Y NOCHE)                 */
/* ========================================================================= */

body::before {
    content: "" !important;
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2 !important;
    background-image: var(--theme-pattern) !important;
    background-repeat: repeat !important;
    background-size: 180px !important;
    pointer-events: none !important;
    opacity: 0.12 !important; /* Modo Noche: 12% */
}

body.light-mode::before, 
body.light-theme::before { 
    opacity: 0.32 !important; /* Modo Día: 32% */
}

/* 2. Capa superior Accent (Modo Noche: 14% | Modo Día: 24%) */
body::after {
    content: "" !important;
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1 !important;
    pointer-events: none !important;
    background: var(--accent, #bc13fe) !important;
    opacity: 0.04 !important; /* Modo Noche: 14% para evitar enrojecidos */
}

body.light-mode::after, 
body.light-theme::after {
    opacity: 0.04 !important; /* Modo Día: 24% para que resalte sin saturar */
}

/* =========================================================================
   3. UNIFICACIÓN TOTAL DE MODALES (CAJAS SÓLIDAS SIN INTERFERENCIAS)
   ========================================================================= */

/* --- A. REGLAS EXCLUSIVAS PARA MODO NOCHE (Fondo oscuro) --- */
body:not(.light-mode):not(.light-theme) .ventana-movible-content:not(#ruletaModal):not(.modal-ventana-wrapper):not(.modal-bloqueante-wrapper):not(.vip-modal-pro), 
body:not(.light-mode):not(.light-theme) .vip-content-pro:not(.modal-ventana-wrapper):not(.modal-bloqueante-wrapper):not(.vip-modal-pro), 
body:not(.light-mode):not(.light-theme) .dmca-modal-box, 
body:not(.light-mode):not(.light-theme) .standard-modal-box, 
body:not(.light-mode):not(.light-theme) .profile-modal-wide, 
body:not(.light-mode):not(.light-theme) .inbox-modal-wide, 
body:not(.light-mode):not(.light-theme) .juegos-content,
body:not(.light-mode):not(.light-theme) #juegos-ventana, 
body:not(.light-mode):not(.light-theme) #ruletaModal > div {
    background-color: #0b0b0d !important; /* Modifica este color SOLO para modo noche */
    color: #ffffff !important;
}

/* --- B. REGLAS EXCLUSIVAS PARA MODO DÍA (Fondo claro) --- */
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 .rules-modal-content, 
body.light-theme .rules-modal-content,
body.light-mode .juegos-content, 
body.light-theme .juegos-content,
body.light-mode #ruletaModal > div, 
body.light-theme #ruletaModal > div {
    background-color: #ffffff !important; /* Modifica este color SOLO para modo día */
    color: #111111 !important;
}

/* --- C. FONDOS DE BANNERS EN MODO DÍA --- */
body.light-mode .side-col-banner, body.light-theme .side-col-banner,
body.light-mode .b-728, body.light-theme .b-728,
body.light-mode .b-250, body.light-theme .b-250,
body.light-mode .b-square, body.light-theme .b-square,
body.light-mode .popup-side-banner, body.light-theme .popup-side-banner {
    background-color: #ffffff !important;
}

/* --- D. CAPA DE PATRÓN DE FONDO (::before) EN MODO NOCHE --- */
.ventana-movible-content:not(#ruletaModal):not(.modal-ventana-wrapper):not(.modal-bloqueante-wrapper):not(.vip-modal-pro)::before,
.vip-content-pro:not(.modal-ventana-wrapper):not(.modal-bloqueante-wrapper):not(.vip-modal-pro)::before,
.dmca-modal-box::before,
.standard-modal-box::before, .profile-modal-wide::before, .inbox-modal-wide::before,
.rules-modal-content::before, .juegos-content::before, #ruletaModal > div::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--theme-pattern) !important;
    background-repeat: repeat !important;
    background-size: 110px !important;
    opacity: 0.14 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* --- E. CAPA DE PATRÓN DE FONDO (::before) EN MODO DÍA --- */
body.light-mode .ventana-movible-content::before, body.light-theme .ventana-movible-content::before,
body.light-mode .vip-content-pro::before, body.light-theme .vip-content-pro::before,
body.light-mode .dmca-modal-box::before, body.light-theme .dmca-modal-box::before,
body.light-mode .standard-modal-box::before, body.light-theme .standard-modal-box::before,
body.light-mode .profile-modal-wide::before, body.light-theme .profile-modal-wide::before,
body.light-mode .inbox-modal-wide::before, body.light-theme .inbox-modal-wide::before,
body.light-mode .rules-modal-content::before, body.light-theme .rules-modal-content::before,
body.light-mode .juegos-content::before, body.light-theme .juegos-content::before,
body.light-mode #ruletaModal > div::before, body.light-theme #ruletaModal > div::before,
body.light-mode .side-col-banner::before, body.light-theme .side-col-banner::before,
body.light-mode .b-728::before, body.light-theme .b-728::before,
body.light-mode .b-250::before, body.light-theme .b-250::before,
body.light-mode .b-square::before, body.light-theme .b-square::before,
body.light-mode .popup-side-banner::before, body.light-theme .popup-side-banner::before {
    opacity: 0.46 !important;
}

/* --- F. ELEVACIÓN DE CONTENIDO POR ENCIMA DEL PATRÓN --- */
.ventana-movible-content > *, .vip-content-pro > *, .dmca-modal-box > *,
.standard-modal-box > *, .profile-modal-wide > *, .inbox-modal-wide > *,
.rules-modal-content > *, .juegos-content > *, #ruletaModal > div > *,
.side-col-banner > *, .b-728 > *, .b-250 > *, .b-square > *, .popup-side-banner > * {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================================
   4. LOGOS DEL HEADER (CONTROL EXACTO DE DÍA/NOCHE Y COLORES)
   ========================================================================= */

/* A. CONTROL DE VISIBILIDAD ESTRICTO (Para evitar logos superpuestos) */
html:not(.light-mode) body:not(.light-mode):not(.light-theme) .logo-light {
    display: none !important;
}

html.light-mode .logo-dark,
body.light-mode .logo-dark,
body.light-theme .logo-dark {
    display: none !important;
}

/* B. ASIGNACIÓN DE COLORES DINÁMICOS AL LOGO ACTIVO */
body.theme-gray .logo-dark { content: url('/roulette/images/theme_gray.webp') !important; }
body.theme-gray.light-mode .logo-light, body.theme-gray.light-theme .logo-light { content: url('/roulette/images/theme_gray_w.webp') !important; }

body.theme-violet .logo-dark { content: url('/roulette/images/theme_violet.webp') !important; }
body.theme-violet.light-mode .logo-light, body.theme-violet.light-theme .logo-light { content: url('/roulette/images/theme_violet_w.webp') !important; }

body.theme-blue .logo-dark { content: url('/roulette/images/theme_blue.webp') !important; }
body.theme-blue.light-mode .logo-light, body.theme-blue.light-theme .logo-light { content: url('/roulette/images/theme_blue_w.webp') !important; }

body.theme-pink .logo-dark { content: url('/roulette/images/theme_pink.webp') !important; }
body.theme-pink.light-mode .logo-light, body.theme-pink.light-theme .logo-light { content: url('/roulette/images/theme_pink_w.webp') !important; }

body.logged-in:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink) .logo-dark,
body.is-authenticated:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink) .logo-dark,
body.theme-gold .logo-dark { content: url('/roulette/images/theme_gold.webp') !important; }

body.logged-in.light-mode:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink) .logo-light,
body.logged-in.light-theme:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink) .logo-light,
body.is-authenticated.light-mode:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink) .logo-light,
body.is-authenticated.light-theme:not(.theme-gray):not(.theme-violet):not(.theme-blue):not(.theme-pink) .logo-light,
body.theme-gold.light-mode .logo-light, body.theme-gold.light-theme .logo-light { content: url('/roulette/images/theme_gold_w.webp') !important; }

/* =========================================================================
   BLOQUEO EXACTO DE MARCOS Y SPINNER DE GOOGLE (SIN AFECTAR AL TEXTO)
   ========================================================================= */

/* Oculta únicamente la ventana flotante original, la rueda y elementos de control */
#goog-gt-tt,
.goog-te-spinner-pos,
.goog-te-spinner-animation,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================================================
   RESPONSIVE: TIPOGRAFÍA FLUIDA Y ELIMINACIÓN DE BULLETS EN MÓVIL
   ========================================================================= */

/* 2. ELIMINAR CUALQUIER VIÑETA O PUNTO (BULLET) RESIDUAL DE LISTAS */
ul, 
ol, 
.header-content ul,
.top-bar ul,
.profile-dropdown-content ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================================
   CONTROL DEL BOTÓN DE ESCRITORIO (iMac 🖥️) EN MÓVIL
   ========================================================================= */

/* 1. Ocultamos el contenedor del iMac en la cabecera superior en móvil
      (tanto si está logueado como si no lo está) */
header #profileDropdownContainer,
.top-bar #profileDropdownContainer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Si la web tiene la barra de navegación inferior móvil (#personalEmojisContainer),
      allí sí permitimos que se muestre cuando el usuario haya iniciado sesión */
body.logged-in #personalEmojisContainer ~ #profileDropdownContainer,
body.is-authenticated #personalEmojisContainer ~ #profileDropdownContainer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* =========================================================================
   RUEDECITA (⚙️) SINCRONIZADA CON JAVASCRIPT SOLO EN ESCRITORIO (PC >= 961px)
   ========================================================================= */

@media screen and (min-width: 961px) {

    /* 1. CUANDO HAY LOGIN: Si JS NO tiene puesto "display: none", SE MUESTRA SÍ O SÍ */
    .top-bar #profileDropdownContainer:not([style*="display: none"]):not([style*="display:none"]),
    #headerMain #profileDropdownContainer:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    /* 2. CUANDO CIERRAS SESIÓN: Si JS le pone "display: none", SE OCULTA AL INSTANTE */
    .top-bar #profileDropdownContainer[style*="display: none"],
    .top-bar #profileDropdownContainer[style*="display:none"],
    #headerMain #profileDropdownContainer[style*="display: none"],
    #headerMain #profileDropdownContainer[style*="display:none"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* 3. Estilo visual del botón interior de la ruedecita */
    .top-bar #profileDropdownContainer .profile-drop-btn,
    #headerMain #profileDropdownContainer .profile-drop-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 15px !important;
        cursor: pointer !important;
        line-height: 1 !important;
    }
}

/* =========================================================================
   1. SELECTORES DE CALIDAD FLOTANTES (DESBLOQUEADOS Y CON CAPA MÁXIMA)
   ========================================================================= */
.video-quality-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 350 !important; /* Por encima de #remoteOverlay y pantallas de espera */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-5px);
}

.video-box:hover .video-quality-overlay,
.video-box:active .video-quality-overlay,
.video-box:focus-within .video-quality-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0);
}

.video-quality-select {
    position: relative;
    z-index: 351 !important;
    pointer-events: auto !important;
    background: rgba(10, 10, 10, 0.9);
    color: #fff;
    border: 1px solid var(--accent, #00e5ff);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    outline: none;
    cursor: pointer !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
}

/* =========================================================================
   1. CONTROL DE ANUNCIOS Y EXPANSIÓN DE PANTALLA (GOLD / MIP / ADMIN)
   ========================================================================= */
.premium-no-ads .side-col-stack,
.premium-no-ads .side-col-banner,
.premium-no-ads .banner-wrapper,
.premium-no-ads .b-square,
.premium-no-ads .b-728,
.premium-no-ads .b-250,
.premium-no-ads .video-ad-overlay,
body.plan-gold .side-col-stack,
body.plan-gold .banner-wrapper,
body.plan-gold .video-ad-overlay,
body.plan-mip .side-col-stack,
body.plan-mip .banner-wrapper,
body.plan-mip .video-ad-overlay,
body.plan-premium-active .side-col-stack,
body.plan-premium-active .banner-wrapper,
body.plan-premium-active .video-ad-overlay {
    display: none !important;
}

/* Al no haber anuncios laterales, la columna central usa el 100% de la pantalla */
body.premium-no-ads .center-column,
body.plan-gold .center-column,
body.plan-mip .center-column,
body.plan-premium-active .center-column {
    max-width: 100% !important;
    width: 100% !important;
}

/* =========================================================================
   2. BARRA SUPERIOR eSIM: CONTADORES Y BOTONES VISIBLES
   ========================================================================= */
.chat-esim-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    background: rgba(15, 15, 15, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Bloque izquierdo: Horas y minutos */
.chat-esim-time-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 130px !important;
    min-width: 130px !important;
    flex-shrink: 0 !important;
}

/* Bloque central: Título centrado con ajuste elástico */
.chat-esim-bar .status-msg {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 11.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    color: var(--accent, #00e5ff) !important;
    letter-spacing: 0.5px !important;
}

/* Bloque derecho: Botón recarga y switch que NUNCA se cortan */
.chat-esim-actions-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 130px !important;
    min-width: 130px !important;
    flex-shrink: 0 !important;
}

/* Solo se oculta el contador y recarga si el usuario es explícitamente invitado */
body.is-guest .chat-esim-time-block,
body.is-guest .chat-esim-actions-block {
    display: none !important;
}

/* Switch Neón */
.esim-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
}
.esim-switch input { opacity: 0; width: 0; height: 0; }
.esim-slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #222;
    border: 1px solid #ff5252;
    transition: 0.3s;
    border-radius: 18px;
}
.esim-slider:before {
    position: absolute; content: "";
    height: 12px; width: 12px; left: 2px; bottom: 2px;
    background-color: #ff5252; transition: 0.3s; border-radius: 50%;
}
input:checked + .esim-slider {
    background-color: rgba(0, 229, 255, 0.15);
    border-color: #00ffcc;
}
input:checked + .esim-slider:before {
    transform: translateX(18px);
    background-color: #00ffcc;
    box-shadow: 0 0 8px #00ffcc;
}

/* =========================================================================
   3. CÁMARAS Y CONTROLES POR PASOS (FOCUS MODE)
   ========================================================================= */
#vStack {
    position: relative !important;
    transition: width 0.3s ease !important;
}

/* Fases de anchura de la cámara remota */
#vStack.focus-active.cam-step-0 { width: 950px !important; }
#vStack.focus-active.cam-step-1 { width: 980px !important; }  /* +30px */
#vStack.focus-active.cam-step-2 { width: 1010px !important; } /* +60px */
#vStack.focus-active.cam-step-3 { width: 1040px !important; } /* +90px */

/* Escalado progresivo de la cámara propia local (+3px, +6px, +9px) */
#vStack.focus-active #localVideoContainer {
    transition: width 0.3s ease, height 0.3s ease !important;
}
#vStack.focus-active.cam-step-0 #localVideoContainer { width: 260px !important; height: 195px !important; }
#vStack.focus-active.cam-step-1 #localVideoContainer { width: 263px !important; height: 198px !important; }
#vStack.focus-active.cam-step-2 #localVideoContainer { width: 266px !important; height: 201px !important; }
#vStack.focus-active.cam-step-3 #localVideoContainer { width: 269px !important; height: 204px !important; }

/* Botón para desenganchar / reanclar el chat */
.btn-undock-chat {
    display: none;
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    width: 26px;
    height: 52px;
    background: #0d0d0d;
    border: 1px solid var(--accent, #00e5ff);
    color: var(--accent, #00e5ff);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    z-index: 120;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 3px 0 10px rgba(0,0,0,0.7);
    transition: background 0.2s, color 0.2s;
}
.btn-undock-chat:hover { background: var(--accent, #00e5ff); color: #000; }
#vStack.focus-active .btn-undock-chat { display: flex !important; }

/* Tirador interactivo por pasos para la cámara */
.camera-resize-handle {
    display: none;
    position: absolute;
    top: 62%;
    right: -14px;
    transform: translateY(-50%);
    width: 30px;
    height: 42px;
    background: #111;
    border: 1px dashed var(--accent, #00e5ff);
    color: var(--accent, #00e5ff);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    z-index: 119;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    transition: background 0.2s, width 0.2s;
}
.camera-resize-handle:hover { background: rgba(0, 229, 255, 0.25); width: 34px; }
#vStack.focus-active.cam-step-1 .camera-resize-handle,
#vStack.focus-active.cam-step-2 .camera-resize-handle,
#vStack.focus-active.cam-step-3 .camera-resize-handle { display: flex !important; }

/* Manito para arrastrar cámaras en modo enfoque */
#vStack.focus-active .video-box { cursor: grab; }
#vStack.is-dragging, #vStack.is-dragging .video-box { cursor: grabbing !important; user-select: none !important; }

/* =========================================================================
   4. CHAT ANCLADO (NORMAL Y ENFOQUE) Y CHAT FLOTANTE DESENGANCHADO
   ========================================================================= */

/* A. Modo Normal y Enfoque ANCLADO: Nunca se aplasta */
.chat-box {
    min-width: 460px !important;
    box-sizing: border-box !important;
}

#vStack.focus-active ~ .chat-box:not(.chat-detached) {
    min-width: 480px !important;
    flex: 1 !important;
    box-sizing: border-box !important;
}

/* B. Modo DESENGANCHADO (Flotante): 530px exactos para encajar a 7px */
.app-container { position: relative !important; }

.chat-box.chat-detached {
    position: absolute !important;
    top: 0px;
    width: 610px !important;
    min-width: 610px !important;
    max-width: 610px !important;
    z-index: 2147483645 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 229, 255, 0.4) !important;
    border: 2px solid var(--accent, #00e5ff) !important;
    transition: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Manito de agarre del chat */
.chat-box.chat-detached .chat-esim-bar,
.chat-box.chat-detached #messages { cursor: grab !important; }
.chat-box.chat-detached.is-dragging { cursor: grabbing !important; user-select: none !important; }

/* =========================================================================
   ESTILOS PARA EL MODAL DE CONFIGURACIÓN GLOBAL DE VÍDEO
   ========================================================================= */

/* Botón de la tuerca en la barra eSIM */
.btn-gear-settings:hover {
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/* Caja del modal de configuración de vídeo */
.video-settings-box {
    max-width: 480px !important;
    width: 90% !important;
    background: #0d0d0d !important;
    border: 1.5px solid var(--accent, #00e5ff) !important;
    border-radius: 20px !important;
    padding: 30px 25px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 229, 255, 0.25) !important;
    cursor: grab;
}

.video-settings-box.is-dragging {
    cursor: grabbing !important;
    user-select: none !important;
}

/* =========================================================================
   VENTANA DE CONFIGURACIÓN GLOBAL: SIN BLUR Y FONDO TRANSPARENTE
   ========================================================================= */
#globalVideoSettingsModal.show {
    display: flex !important;
    visibility: visible !important;
    z-index: 2147483646 !important;
    pointer-events: none !important;        /* El fondo no bloquea clics al juego o llamadas */
    background: transparent !important;      /* Sin velo negro que tape la ruleta */
    backdrop-filter: none !important;        /* Sin desenfoque: la ruleta se ve perfectamente detrás */
    -webkit-backdrop-filter: none !important;
    align-items: center !important;
    justify-content: center !important;
}

/* La caja del modal sí recibe interacción de ratón y arrastre */
#globalVideoSettingsModal .video-settings-box {
    pointer-events: auto !important;
}

/* =========================================================================
   1. PRIORIDAD DE CAPAS: MODALES DE LLAMADA POR ENCIMA DEL INBOX
   ========================================================================= */
#confirmCallModal,
#confirmFixedCallModal,
#incomingCallModal,
#clientCallConfirmModal,
#callProposalModal,
#recordingPaymentConfirmModal,
#recordingConsentModal {
    z-index: 2147483646 !important;
    position: fixed !important;
}

#confirmCallModal.show,
#confirmFixedCallModal.show,
#incomingCallModal.show,
#clientCallConfirmModal.show,
#callProposalModal.show {
    display: flex !important;
}

/* =========================================================================
   BOTONES DE VIDEOLLAMADA DEL INBOX EN 2 LÍNEAS (OCULTOS POR DEFECTO)
   ========================================================================= */
#inboxVideoCallBtn,
#btnFixedCamera {
    display: none !important; /* Ocultos hasta que se seleccione una conversación */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-family: 'Orbitron', sans-serif !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    min-width: 120px !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Línea 1: Título de la llamada */
#inboxVideoCallBtn .btn-call-title,
#btnFixedCamera .btn-call-title {
    font-size: 11px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    display: block !important;
}

/* Línea 2: Tarifa personalizada en créditos */
#inboxVideoCallBtn .btn-call-sub,
#btnFixedCamera .btn-call-sub {
    font-size: 9px !important;
    opacity: 0.85 !important;
    font-weight: normal !important;
    display: block !important;
    margin-top: 2px !important;
}

#inboxVideoCallBtn:hover,
#btnFixedCamera:hover {
    transform: translateY(-2px) !important;
}

/* =========================================================================
   PREVENCIÓN DE PARPADEO (FLICKER): OCULTOS POR DEFECTO
   ========================================================================= */
#profileDropdownContainer,
#headerCreditsDisplay,
#headerInboxBtn {
    display: none !important;
}

/* El botón de Login debe estar visible por defecto para los invitados */
#headerAuthBtn {
    display: inline-block !important;
}

/* El botón dorado permanece oculto para invitados */
#btnThemeGold {
    display: none !important;
}

/* Solo se muestra si el usuario ha iniciado sesión (clase logged-in en el body) */
body.logged-in #btnThemeGold {
    display: flex !important;
}

/* =========================================================================
   TABLA VIP (FREE) SUPERIOR - ANCHO 980PX Y ALINEACIÓN DE COLUMNAS
   ========================================================================= */

/* 1. Contenedor que iguala exactamente el ancho de las 3 tablas inferiores */
.free-plan-top-wrapper {
    width: 100%;
    max-width: 980px; 
    margin: 0 auto 25px auto;
    box-sizing: border-box;
}

/* 2. Asegura que las columnas de valores (2, 4 y 6) se alineen a la derecha con color neón */
#freeVipTable td:nth-child(2),
#freeVipTable td:nth-child(4),
#freeVipTable td:nth-child(6) {
    text-align: right;
    font-weight: bold;
    color: var(--accent);
}

/* =========================================================================
   TABLA VIP (FREE) SUPERIOR - ALINEACIÓN ESTRICTA EN 3 COLUMNAS
   ========================================================================= */

/* 1. Contenedor que iguala exactamente el ancho de las 3 tablas inferiores */
.free-plan-top-wrapper {
    width: 100%;
    max-width: 980px; 
    margin: 0 auto 25px auto;
    box-sizing: border-box;
}

/* 2. Forzar a la tabla a usar anchos fijos y no depender del texto */
#freeVipTable {
    table-layout: fixed !important;
    width: 100% !important;
}

/* 3. Dividir matemáticamente las 6 celdas (16.66% x 6 = 100%) */
#freeVipTable td {
    width: 16.666% !important;
    word-wrap: break-word !important; 
    overflow-wrap: break-word !important; /* Evita que textos largos rompan la celda */
}

/* 4. Mantener la alineación derecha y el color neón para los valores (columnas pares) */
#freeVipTable td:nth-child(2),
#freeVipTable td:nth-child(4),
#freeVipTable td:nth-child(6) {
    text-align: right;
    font-weight: bold;
    color: var(--accent);
}

/* 5. Excepciones para que las celdas de botones y el título ocupen el 100% real */
#freeVipTable th, 
#freeVipTable td[colspan="6"] {
    width: 100% !important;
}

.toys-menu-container:hover .toys-dropdown-content {
        display: flex !important;
    }.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-color: #000 !important; /* Fondo negro estricto */
    border: 1px solid #333; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 15px; 
    flex-shrink: 0; 
    /* Hemos eliminado el "transition" para que no parpadee al cargar */
}

/* Añade esto justo debajo para forzar que el hueco del anuncio sea negro mientras carga */
.b-728 iframe, .b-250 iframe, .b-square iframe {
    background-color: #000 !important;
    color-scheme: dark;
}

/* 4. WIDGET GHOST MODE: SE ESTIRA A LO ANCHO AL TRADUCIR SIN DEFORMAR LOS TOGGLES */
#ghostModeWidget {
    width: max-content !important;
    min-width: max-content !important;
    padding: 3px 10px !important;
    flex-shrink: 0 !important;
}

#ghostModeWidget span:not(#ghostDotGrid):not(#ghostDotKm) {
    width: auto !important;
    min-width: 26px !important;
    white-space: nowrap !important;
    text-align: right !important;
    padding-right: 4px !important;
}

#ghostSwitchGrid,
#ghostSwitchKm {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
}

#ghostDotGrid,
#ghostDotKm {
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;
    height: 7px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Estado de alerta cuando el usuario tiene saldo en cuarentena de 7 días y 0 gastable */
.saldo-congelado-alerta {
    color: #ff6633 !important;
    border-color: #ff3333 !important;
    background: rgba(255, 51, 51, 0.14) !important;
    box-shadow: 0 0 12px rgba(255, 102, 51, 0.45) !important;
    cursor: help !important;
    animation: pulseFrozenBalance 2s infinite ease-in-out;
}

@keyframes pulseFrozenBalance {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

/* ==========================================================================
   UDL QUICK DOCK: FILA HORIZONTAL COMPACTA DESPLEGABLE (BORDE DERECHO)
   ========================================================================== */
#udl-floating-dock-wrapper {
    position: fixed !important;
    bottom: 142px !important;
    right: 0 !important;
    z-index: 99999999990 !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    pointer-events: none !important;
}

#udl-dock-toggle-btn {
    pointer-events: auto !important;
    width: 28px !important;
    height: 46px !important;
    background: rgba(13, 17, 24, 0.96) !important;
    border: 1.5px solid var(--neon-color, #00e5ff) !important;
    border-right: none !important;
    border-radius: 12px 0 0 12px !important;
    color: var(--neon-color, #00e5ff) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.75) !important;
    transition: background 0.2s, color 0.2s !important;
    padding: 0 !important;
    outline: none !important;
}

#udl-dock-toggle-btn:hover {
    background: var(--neon-color, #00e5ff) !important;
    color: #000 !important;
}

#udl-dock-horizontal-tray {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(13, 17, 24, 0.96) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
    margin-right: 6px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85) !important;
    transform: translateX(calc(100% + 45px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0.2s !important;
}

#udl-floating-dock-wrapper.dock-open #udl-dock-horizontal-tray {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Resetear las posiciones fijas antiguas cuando los 5 botones entran en la fila */
#udl-dock-horizontal-tray > #btnFloatingRules,
#udl-dock-horizontal-tray > #btn-ruleta-flotante,
#udl-dock-horizontal-tray > #btn-juegos-flotante,
#udl-dock-horizontal-tray > .theme-floater,
#udl-dock-horizontal-tray > .btn-floating-dmca {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2 !important;
}

/* Forzar que el botón 6/7 (Juegos) sea visible dentro de la barra compacta */
#udl-dock-horizontal-tray > #btn-juegos-flotante {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
}

#udl-dock-horizontal-tray > #btn-ruleta-flotante,
#udl-dock-horizontal-tray > .btn-floating-dmca {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
}

#udl-dock-horizontal-tray > #btnFloatingRules {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

/* =====================================================================
   BOTONES FLOTANTES UNIFICADOS + UDL QUICK DOCK (SIN PARPADEO AL CARGAR)
   ===================================================================== */

/* 1. Ocultar los botones sueltos mientras no estén dentro del dock (evita flash al recargar) */
body > #btnFloatingRules,
body > #btn-ruleta-flotante,
body > #btn-juegos-flotante,
body > .theme-floater,
body > a.btn-floating-dmca {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 2. Contenedor principal del Quick Dock (abajo a la derecha, por encima de todo) */
#udl-floating-dock-wrapper {
    position: fixed !important;
    top: auto !important;
    bottom: 45px !important;
    right: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    pointer-events: none !important;
}

#udl-dock-toggle-btn {
    pointer-events: auto !important;
    width: 32px !important;
    height: 52px !important;
    background: rgba(13, 17, 24, 0.96) !important;
    border: 1.5px solid var(--accent, #00e5ff) !important;
    border-right: none !important;
    border-radius: 14px 0 0 14px !important;
    color: var(--accent, #00e5ff) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.75) !important;
    transition: background 0.2s, color 0.2s !important;
    padding: 0 !important;
    outline: none !important;
}

#udl-dock-toggle-btn:hover {
    background: var(--accent, #00e5ff) !important;
    color: #000000 !important;
}

#udl-dock-horizontal-tray {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(13, 17, 24, 0.96) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
    margin-right: 6px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85) !important;
    transform: translateX(calc(100% + 45px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0.2s !important;
}

#udl-floating-dock-wrapper.dock-open #udl-dock-horizontal-tray {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Botón Rules: Cápsula 100% redondeada por ambos cantos */
#udl-dock-horizontal-tray > #btnFloatingRules {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: max-content !important;
    min-width: 65px !important;
    height: 32px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-family: 'Orbitron', sans-serif !important;
    white-space: nowrap !important;
    border-radius: 16px !important;
    border: 1.5px solid #ff3333 !important;
    background: #222222 !important;
    color: #ffffff !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

/* 4. Botones circulares dentro del dock (Ruleta, Juegos 6/7, DMCA, Sentinel) */
#udl-dock-horizontal-tray > #btn-ruleta-flotante,
#udl-dock-horizontal-tray > #btn-juegos-flotante,
#udl-dock-horizontal-tray > a.btn-floating-dmca,
#udl-dock-horizontal-tray > #btn-sentinel-flotante {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: #000000 !important;
    border: 1.5px solid var(--accent, #00e5ff) !important;
    color: var(--accent, #00e5ff) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transform: none !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

#udl-dock-horizontal-tray > #btn-sentinel-flotante {
    border-color: #ff2a2a !important;
    box-shadow: 0 0 10px rgba(255, 42, 42, 0.4) !important;
}

#udl-dock-horizontal-tray > #btn-ruleta-flotante:hover,
#udl-dock-horizontal-tray > #btn-juegos-flotante:hover,
#udl-dock-horizontal-tray > a.btn-floating-dmca:hover,
#udl-dock-horizontal-tray > #btn-sentinel-flotante:hover {
    transform: scale(1.1) !important;
    border-color: #ffffff !important;
}

#btn-ruleta-flotante .icono-ruleta-animado {
    font-size: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 5. Selector de temas y despliegue de colores hacia la izquierda */
#udl-dock-horizontal-tray > .theme-floater {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    background: #000000 !important;
    border: 1.5px solid var(--accent-color, #00e5ff) !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    cursor: pointer !important;
}

#udl-dock-horizontal-tray .theme-floater .theme-main,
#udl-dock-horizontal-tray .theme-floater .theme-btn.theme-main {
    width: 100% !important;
    height: 100% !important;
    min-width: unset !important;
    min-height: unset !important;
    border: none !important;
    background: transparent !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
}

#udl-dock-horizontal-tray .theme-floater .theme-colors {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    background: rgba(13, 17, 24, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    padding: 8px 6px !important;
    display: none !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.95) !important;
    z-index: 2147483648 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

#udl-dock-horizontal-tray .theme-floater.open .theme-colors {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#udl-dock-horizontal-tray .theme-colors .theme-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s, border-color 0.2s !important;
}

#udl-dock-horizontal-tray .theme-colors .theme-btn:hover {
    transform: scale(1.15) !important;
    border-color: #ffffff !important;
}

/* 6. Colores de los botones de tema (conservados intactos) */
.theme-floater .c-gray, .theme-colors .c-gray { background-color: #cccccc !important; }
.theme-floater .c-purple, .theme-colors .c-purple { background-color: #b829ff !important; }
.theme-floater .c-blue, .theme-colors .c-blue { background-color: #00e5ff !important; }
.theme-floater .c-pink, .theme-colors .c-pink { background-color: #ff007f !important; }
.theme-floater .c-gold, .theme-colors .c-gold { background-color: #ffcc00 !important; }

/* 7. Píldora Superboost/ActiveNow en Dating (sigue libre en su sitio) */
#promoSystemContainer {
    position: fixed !important;
    top: auto !important;
    bottom: 122px !important;
    right: 30px !important;
    left: auto !important;
    width: 42px !important;
    height: 75px !important;
    transform: scale(0.75) !important;
    transform-origin: center center !important;
    z-index: 2147483640 !important;
}

/* =====================================================================
   UDL LEFT DOCK: ATLAS (1º) + RADIO FLOTANTE TRANSPARENTE (PLAY / STOP)
   ===================================================================== */
#udl-left-dock-wrapper {
    position: fixed !important;
    bottom: 45px !important;
    left: 0 !important;
    z-index: 2147483 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    pointer-events: none !important;
}

#udl-left-dock-toggle {
    pointer-events: auto !important;
    width: 32px !important;
    height: 52px !important;
    background: rgba(13, 17, 24, 0.96) !important;
    border: 1.5px solid var(--accent, #00e5ff) !important;
    border-left: none !important;
    border-radius: 0 14px 14px 0 !important;
    color: var(--accent, #00e5ff) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.75) !important;
    transition: background 0.2s, color 0.2s !important;
    padding: 0 !important;
    outline: none !important;
}

#udl-left-dock-toggle:hover {
    background: var(--accent, #00e5ff) !important;
    color: #000000 !important;
}

#udl-left-dock-tray {
    pointer-events: auto !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(13, 17, 24, 0.96) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
    margin-left: 6px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85) !important;
    transform: translateX(calc(-100% - 45px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0.2s !important;
}

#udl-left-dock-wrapper.dock-open #udl-left-dock-tray {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.udl-left-dock-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: #000000 !important;
    border: 1.5px solid var(--accent, #00e5ff) !important;
    color: var(--accent, #00e5ff) !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.udl-left-dock-btn:hover {
    transform: scale(1.1) !important;
    border-color: #ffffff !important;
}

/* Reproductor flotante 100% transparente (sin caja ni borde envolvente) */
#udl-radio-popup-box {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 0 !important;
    width: min(640px, 92vw) !important;
    height: 112px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 2147483648 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
    overflow: visible !important;
}

#udl-radio-popup-box.radio-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Botón de Atlas AI integrado como 1er botón dentro del dock izquierdo */
#udl-left-dock-tray > .udl-atlas-dock-slot {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

#ai-launcher-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =====================================================================
   🛡️ UDL FORENSIC WATERMARK (SIN KYC 6s / INFRACTOR PERMANENTE 3 STRIKES)
   ===================================================================== */
.udl-forensic-watermark {
    position: absolute !important;
    z-index: 999 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: 'Orbitron', sans-serif !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    transition: top 0.4s ease, left 0.4s ease !important;
}

/* MODO 1: Usuario SIN KYC (Difuminado, aparece cada 6 segundos) */
.udl-forensic-watermark.mode-nokyc {
    background: rgba(0, 0, 0, 0.28) !important;
    color: rgba(255, 255, 255, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(1.5px) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
    animation: udlBlinkEvery6s 6s infinite ease-in-out !important;
}

.udl-forensic-watermark.mode-nokyc .udl-wm-brand {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.udl-forensic-watermark.mode-nokyc .udl-wm-user {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin-top: 2px !important;
}

@keyframes udlBlinkEvery6s {
    0%, 55% { opacity: 0; }
    65%, 90% { opacity: 0.38; }
    100% { opacity: 0; }
}

/* MODO 2: Infractor (3 intentos de captura - Se queda parpadeando de por vida) */
.udl-forensic-watermark.mode-infringer {
    background: rgba(20, 0, 0, 0.72) !important;
    border: 1.5px solid rgba(255, 42, 42, 0.85) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.55) !important;
    animation: udlInfringerPulse 1.1s infinite alternate ease-in-out !important;
}

.udl-forensic-watermark.mode-infringer .udl-wm-brand {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #ffcc00 !important;
    letter-spacing: 1.2px !important;
}

.udl-forensic-watermark.mode-infringer .udl-wm-user {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 3px 0 !important;
}

.udl-forensic-watermark.mode-infringer .udl-wm-warning {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #ff3333 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
}

@keyframes udlInfringerPulse {
    0% { opacity: 0.25; transform: scale(0.98); }
    100% { opacity: 0.92; transform: scale(1.02); }
}