/* =========================================================================
   ARCHIVO: menu-unificado.css
   Contiene los estilos blindados para los dos tipos de menús
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DISEÑO TIPO ISLA (Para la Ruleta)
   ------------------------------------------------------------------------- */
/* Contenedor principal de la isla con altura fija para evitar saltos al actualizar */
.menu-isla {
    position: relative; 
    width: 100%; 
    max-width: 1400px; 
    height: 75px !important; 
    min-height: 75px !important;
    box-sizing: border-box; 
    margin: 20px auto 16px auto; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    border-radius: 22px; 
    background: rgba(15, 15, 15, 0.98); 
    border: 1px solid rgba(204, 204, 204, 0.4); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    z-index: 1000 !important;
}

/* Logo Isla */
.menu-isla .logo-container {
    height: 100%;
    width: 110px;
    min-width: 110px;
    border-radius: 22px 0 0 22px;
    overflow: hidden;
    display: block;
}
.menu-isla .logo-img { height: 100%; width: 100%; object-fit: cover; }

/* Título central Isla */
.menu-isla .titulo-central {
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif; 
    font-size: 1.8rem; 
    font-weight: bold; 
    color: var(--accent); 
    text-shadow: 0 0 15px var(--accent); 
    letter-spacing: 2px; 
    text-decoration: none; 
    white-space: nowrap;
}

/* Derecha Isla */
.menu-isla .header-right {
    display: flex; 
    align-items: center; 
    gap: 15px; 
    height: 100%; 
    margin-right: 16px;
}

/* =========================================================================
   3. ESTILOS COMPARTIDOS (BOTONES COMPACTOS)
   ========================================================================= */

/* Tamaño compacto y proporcionado para la zona derecha (Login, Rueda, Créditos) */
.btn-dating-compact {
    padding: 8px 12px !important;
    margin: 0 !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
}

/* =========================================================================
   4. CONTROL RESPONSIVE DE LA RUEDECITA (⚙️) EN EL MENÚ UNIFICADO
   ========================================================================= */

/* A. En teléfonos móviles: Ocultamos siempre la ruedecita superior */
@media screen and (max-width: 768px) {
    .menu-isla #profileDropdownContainer,
    .menu-landing #profileDropdownContainer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* B. En ordenadores (PC/Mac): Mostramos la ruedecita SI hay sesión iniciada */
@media screen and (min-width: 769px) {
    /* Si el contenedor NO tiene "display: none" (es decir, el JS detectó login), lo mostramos forzosamente */
    .menu-isla #profileDropdownContainer:not([style*="display: none"]):not([style*="display:none"]),
    .menu-landing #profileDropdownContainer:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* =========================================================================
   5. MEGA MENÚ, DESPLEGABLES Y EFECTOS (Tripas del Menú)
   ========================================================================= */

.profile-dropdown-wrapper { position: relative; height: 100%; display: flex; align-items: center; }
.profile-drop-btn { margin-left: 0; margin-right: 15px; }

/* Estado inicial del Mega Menú (Oculto, pequeño y girado) */
.profile-dropdown-content.mega-menu { 
    visibility: hidden !important; 
    opacity: 0 !important; 
    transform: scale(0.5) rotate(360deg) !important; 
    position: absolute; right: 0; top: 100%; 
    background: rgba(15, 15, 15, 0.98); 
    width: max-content; max-width: 480px; 
    box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.9); 
    z-index: 2147483645; /* Por encima de la barra del menú */
    border: 1px solid var(--accent); 
    border-radius: 15px; padding: 15px; padding-bottom: 20px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; 
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.3s !important; 
}

/* Espaciador invisible para no perder el hover */
.profile-dropdown-content.mega-menu::before { content: ""; position: absolute; top: -15px; left: 0; right: 0; height: 15px; background: transparent; }

/* Hover activo (Aparece y gira a su posición normal) */
.profile-dropdown-wrapper:hover .profile-dropdown-content.mega-menu { 
    visibility: visible !important; 
    opacity: 1 !important; 
    transform: scale(1) rotate(0deg) !important; 
}

/* Estructura interior */
.menu-category-group { display: flex; flex-direction: column; gap: 8px; }
.menu-category-title { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--accent); letter-spacing: 1px; padding-bottom: 5px; border-bottom: 1px dashed rgba(255, 255, 255, 0.15); text-transform: uppercase; margin-bottom: 3px; }

/* Diseño de los botones internos */
.profile-dropdown-content.mega-menu a,
.profile-dropdown-content.mega-menu button,
.profile-dropdown-content.mega-menu .btn-partner-action,
.profile-dropdown-content.mega-menu .btn-vault-full { 
    color: white; height: auto !important; min-height: 42px !important; padding: 10px 12px !important; text-decoration: none; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px; font-family: 'Orbitron', sans-serif; font-size: 11px !important; background: rgba(20, 20, 20, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 9px; font-weight: bold; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; cursor: pointer; transition: all 0.2s ease; 
}

/* Hovers básicos y cierre de sesión */
.profile-dropdown-content.mega-menu a:hover,
.profile-dropdown-content.mega-menu button:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); }
.profile-dropdown-content.mega-menu a.logout-link { color: #ff3333 !important; border-color: rgba(255, 51, 51, 0.3) !important; }
.profile-dropdown-content.mega-menu a.logout-link:hover { background: rgba(255, 51, 51, 0.1) !important; color: #fff !important; border-color: #ff3333 !important; }

/* Modificadores de color exclusivos */
.profile-dropdown-content.mega-menu button[onclick*="Precios"], .profile-dropdown-content.mega-menu button[onclick*="Affiliate"], .profile-dropdown-content.mega-menu button[onclick*="Historial"] { color: #ffcc00 !important; border-color: rgba(255, 204, 0, 0.3) !important; }
.profile-dropdown-content.mega-menu button[onclick*="Precios"]:hover, .profile-dropdown-content.mega-menu button[onclick*="Affiliate"]:hover, .profile-dropdown-content.mega-menu button[onclick*="Historial"]:hover { background: rgba(255, 204, 0, 0.1) !important; border-color: #ffcc00 !important; }
.profile-dropdown-content.mega-menu button[onclick*="Marketplace"] { color: #bc13fe !important; border-color: rgba(188, 19, 254, 0.3) !important; }
.profile-dropdown-content.mega-menu button[onclick*="Marketplace"]:hover { background: rgba(188, 19, 254, 0.1) !important; border-color: #bc13fe !important; }
.profile-dropdown-content.mega-menu button[onclick*="LiveHub"] { color: #ff3333 !important; border-color: rgba(255, 51, 51, 0.3) !important; }
.profile-dropdown-content.mega-menu button[onclick*="LiveHub"]:hover { background: rgba(255, 51, 51, 0.1) !important; border-color: #ff3333 !important; }
.profile-dropdown-content.mega-menu button[onclick*="CloudDrive"] { color: #00e5ff !important; border-color: rgba(0, 229, 255, 0.3) !important; }
.profile-dropdown-content.mega-menu button[onclick*="CloudDrive"]:hover { background: rgba(0, 229, 255, 0.1) !important; border-color: #00e5ff !important; }
.profile-dropdown-content.mega-menu button[onclick*="Escaner"] { color: #00ffcc !important; border-color: rgba(0, 255, 204, 0.3) !important; }
.profile-dropdown-content.mega-menu button[onclick*="Escaner"]:hover { background: rgba(0, 255, 204, 0.1) !important; border-color: #00ffcc !important; box-shadow: 0 0 12px rgba(0, 255, 204, 0.3) !important; }

/* CAJITAS FLOTANTES Y PUENTES INVISIBLES (Menú limpio) */
.menu-limpio { position: relative; width: 100%; display: block; }
.btn-limpio { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px; min-height: 42px !important; box-sizing: border-box !important; margin: 0 !important; background: rgba(20, 20, 20, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; color: white; font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; }
.btn-limpio:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); }
.caja-flotante { display: none; position: absolute; top: -5px; right: 100%; margin-right: 8px; min-width: 130px; background: #0f0f0f; border: 1px solid var(--accent); border-radius: 9px; padding: 8px; flex-direction: column; gap: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.9); z-index: 5000; }
.caja-flotante::after { content: ""; position: absolute; top: 0; right: -15px; width: 15px; height: 100%; background: transparent; }
.menu-limpio:hover .caja-flotante { display: flex; }
.sublink-item { padding: 8px 12px; color: #ccc; font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; border-radius: 4px; cursor: pointer; transition: background 0.2s, color 0.2s; text-align: left; }
.sublink-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.flechita { font-size: 10px; color: rgba(255, 255, 255, 0.4); }
.btn-limpio:hover .flechita { color: inherit; }

/* EFECTOS DE ROTACIÓN */
.text-rotate { display: inline-block; transition: transform 0.6s ease; }
.menu-category-group > button:hover .text-rotate, .menu-category-group > a:hover .text-rotate { transform: rotate(360deg); }
.caja-giratoria { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; transform-style: preserve-3d; }
.caja-giratoria:hover { transform: rotateY(360deg) !important; }
.caja-giratoria:hover i { transform: rotate(360deg); transition: transform 0.6s ease; }

/* MODO DÍA: ADAPTACIÓN DE COLORES INTERNOS */
body.light-mode .profile-dropdown-content.mega-menu a, 
body.light-mode .profile-dropdown-content.mega-menu button,
body.light-theme .profile-dropdown-content.mega-menu a, 
body.light-theme .profile-dropdown-content.mega-menu button { 
    background-color: #f2f2f2 !important; 
    border-color: #d0d0d0 !important; 
    color: #111 !important; 
}

body.light-mode .profile-dropdown-content.mega-menu a:hover, 
body.light-mode .profile-dropdown-content.mega-menu button:hover,
body.light-theme .profile-dropdown-content.mega-menu a:hover, 
body.light-theme .profile-dropdown-content.mega-menu button:hover { 
    background-color: #e2e2e2 !important; 
    color: var(--accent) !important; 
}

/* -------------------------------------------------------------------------
   2. DISEÑO TIPO LANDING (Para Dating / Index)
   ------------------------------------------------------------------------- */
.menu-landing {
    width: 92%;
    max-width: 1200px;
    min-height: 70px !important;
    padding: 15px 30px;
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    /* z-index elevado para evitar superposiciones */
    z-index: 1000 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Logo Landing */
.menu-landing .logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-left: -30px;
    margin-top: -15px;
    margin-bottom: -15px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    overflow: hidden;
    width: 110px !important;  /* Reserva el espacio antes de que cargue la foto */
    height: 63px !important;
    flex-shrink: 0 !important;
}

.menu-landing .logo-img { 
    height: 63px !important; 
    width: 110px !important; 
    object-fit: cover; 
    display: block; 
}

/* Título central Landing */
.menu-landing .titulo-central {
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%);
    font-family: 'Orbitron'; 
    font-size: 18px; 
    color: var(--neon-color); 
    text-shadow: 0 0 10px var(--neon-glow); 
    text-decoration: none; 
    font-weight: bold;
}

/* Derecha Landing (Doble separación) */
.menu-landing .header-right {
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

/* Regla modo día forzada para Landing */
body.light-mode .menu-landing, body.light-theme .menu-landing {
    background: #ffffff !important;
    border: 1px solid #d5d5d5 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
}

/* -------------------------------------------------------------------------
   3. DISEÑO TIPO INDEX (Ancho completo, pegado arriba)
   ------------------------------------------------------------------------- */
.menu-index {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    min-height: 65px !important;
    padding: 10px 40px;
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between; /* Logo a la izquierda, botones a la derecha */
    align-items: center;
    /* z-index elevado para asegurar visibilidad absoluta */
    z-index: 1000 !important;
}

/* Ajuste del Logo para la barra plana */
.menu-index .logo-container {
    display: flex;
    align-items: center;
    height: 45px !important;
    width: 90px !important;   /* Reserva el espacio exacto */
    min-width: 90px !important;
    flex-shrink: 0 !important;
    text-decoration: none;
}
.menu-index .logo-img { 
    height: 45px !important; 
    width: 90px !important; 
    object-fit: cover; 
}

/* Ocultamos el título central, en el Index no se usa */
.menu-index .titulo-central { display: none !important; }

/* Contenedor derecho (Botones) */
.menu-index .header-right {
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

/* Modo Día para Index */
body.light-mode .menu-index,
body.light-theme .menu-index {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid #cccccc !important;
}