/* =================================================================== */
/*      MAKUMOTO LAYOUT (v2.0)
/*      Estructura Principal: Header, Footer, Main Container y Scroll
/* =================================================================== */

:root {
    --nav-top-height: 60px;
    --nav-bottom-height: 80px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-top: env(safe-area-inset-top, 0px);
}

/* =================================================================== */
/*      1. ESTRUCTURA BASE (APP CONTAINER) - MODO TWITTER/FEED
/* =================================================================== */

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100dvh;
    overflow: hidden; 
    background-color: var(--color-background);
}

/* Contenedor Principal */
main.app-container {
    width: 100vw;
    height: 100dvh;
    overflow-y: scroll; /* Scroll normal */
    /* scroll-snap-type: y mandatory; <--- ELIMINADO: Esto causaba el efecto magnético */
    position: absolute;
    top: 0; left: 0;
    z-index: var(--z-base);
    
    /* Scroll suave nativo */
    -webkit-overflow-scrolling: touch;
    
    /* Ocultar barra de scroll pero permitir navegación */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
main.app-container::-webkit-scrollbar { display: none; }

/* Tarjetas Base del Feed (CORREGIDO PARA LISTA CONTINUA) */
.feed-card {
    position: relative;
    width: 100%; /* Ajuste al contenedor */
    max-width: 600px; /* Opcional: Para que no se vea gigante en PC */
    margin: 0 auto; /* Centrado si usas max-width */
    
    /* CAMBIO CLAVE: Altura automática según contenido */
    height: auto !important; 
    min-height: unset !important; 
    
    /* scroll-snap-align: start; <--- ELIMINADO */
    /* scroll-snap-stop: always; <--- ELIMINADO */
    
    overflow: visible; /* Deja ver menús desplegables */
    background: var(--color-background);
    
    /* Separador estilo Twitter */
    border-bottom: 1px solid #2f3336; 
}

/* Ajuste específico para cuando usas la clase pro-twitter-card dentro */
.feed-card:has(.pro-twitter-card) {
    background: transparent;
    padding: 0;
}

/* Espaciado interno para el contenido */
.dashboard-feed-layout {
    padding-top: calc(var(--nav-top-height) + 10px);
    padding-bottom: calc(var(--nav-bottom-height) + 40px); /* Espacio extra abajo */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Pega los elementos arriba */
    min-height: 100%;
}
/* =================================================================== */
/*      PARCHE CRÍTICO MÓVIL: PERFIL COMO OVERLAY
/*      Esto asegura que en el celular el perfil tape todo (como antes)
/* =================================================================== */

#page-profile {
    display: none; /* Oculto por defecto */
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw; 
    height: 100dvh;
    z-index: 10000 !important; /* MÁXIMA PRIORIDAD EN MÓVIL */
    background-color: var(--color-background);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px; /* Espacio para scroll final */
}

/* Cuando se activa con JS, se muestra a pantalla completa */
#page-profile.active {
        display: block !important;
    }

    /* =================================================================== */
    /* FIX: LYRA AI EN COLUMNA CENTRAL (ESTILO X)
    /* =================================================================== */
    #my-journey-sheet-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important; /* Centrado */
        margin-left: -300px !important; /* Mitad de 600px */
        
        width: 600px !important; /* Ancho estricto */
        height: 100vh !important;
        
        /* Fondo negro para integrar con el tema */
        background: #000 !important; 
        
        /* Bordes laterales para definir la columna */
        border-left: 1px solid #2f3336 !important;
        border-right: 1px solid #2f3336 !important;
        
        z-index: 70 !important; /* Encima del perfil (60) si se abriera encima */
        padding: 0 !important;
    }

    /* Ajuste interno para Lyra en Desktop */
    #my-journey-sheet-overlay .content-area {
        background: #000 !important; /* Forzar negro sobre el gris #1e1e1e */
        width: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
    }
    ::-webkit-scrollbar { width: 0px; background: transparent; }

/* =================================================================== */
/* FIX FINAL: PERFIL FULL SCREEN (SIN RAYAS, SIN BARRAS)

/* En modo Pastel Móvil, asegurar fondo blanco */
body.theme-pastel #page-profile {
    background-color: #ffffff !important;
}
/* =================================================================== */
/*      2. GHOST NAV TOP (GRID 5 COLUMNAS - ALINEACIÓN PERFECTA)
/* =================================================================== */

#ghost-nav-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    
    height: 60px; 
    z-index: 2147483647 !important; /* MÁXIMA PRIORIDAD */
    
    /* CAMBIO A GRID: LA SOLUCIÓN MATEMÁTICA PARA IOS */
    display: grid;
    /* 5 Columnas de idéntico tamaño (1 fracción cada una) */
    grid-template-columns: repeat(5, 1fr);
    
    /* Alineación de los items dentro de la rejilla */
    align-items: center;
    justify-items: center;
    
    /* Cero Padding lateral para usar el 100% del ancho real */
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    
    /* FONDO FEED: Glass Oscuro */
    background: rgba(0, 0, 0, 0.85) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important; 
    
    padding-top: calc(env(safe-area-inset-top) + 5px); 
    padding-bottom: 5px;
    
    transition: transform 0.3s ease, background 0.3s ease;
    will-change: transform;
    pointer-events: none;
}

#ghost-nav-top.nav-hidden {
    transform: translateY(-100%);
}

/* --- ESTILO DE LOS ICONOS --- */
.ghost-link {
    pointer-events: auto;
    background: transparent;
    border: none;
    
    /* TAMAÑO EQUILIBRADO */
    font-size: 1.4rem; 
    
    cursor: pointer;
    transition: transform 0.2s;
    
    padding: 10px; 
    
    /* El ancho lo define la Grid, esto es solo para centrar el contenido */
    width: 100%; 
    height: 100%;
    display: flex; align-items: center; justify-content: center;
}

.ghost-link:active {
    transform: scale(0.9);
}


/* --- COLORES FEED (LAS 5 GEMAS) --- */

/* 1. PERFIL - Blanco Puro (Estilo Clean) */
.ghost-link[data-action="open-own-profile"] i { 
    color: #FFFFFF; 
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); 
}

/* 2. BOA - Verde */
.ghost-link[data-action="open-boa"] i { 
    color: #2ecc71; 
    filter: drop-shadow(0 0 5px rgba(46, 204, 113, 0.4)); 
}

/* 3. GANA - Amarillo */
.ghost-link[data-action="open-user-earn"] i { 
    color: #FFD700; 
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)); 
}

/* 4. JUEGA - Morado */
.ghost-link[data-action="open-gamer-menu"] i { 
    color: #ab71ed; 
    filter: drop-shadow(0 0 5px rgba(171, 113, 237, 0.4)); 
}

/* 5. AVISOS - Turquesa */
.ghost-link[data-action="open-daily-tips"] i { 
    color: #00f3ff; 
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.4)); 
}


/* =================================================================== */
/*      ESTILOS MODO TV / VIDEO (TODO FANTASMA)
/* =================================================================== */

body.tv-mode-active #ghost-nav-top,
body.tv-mode-active #ghost-nav-top.nav-hidden {
    transform: translateY(0) !important; 
    
    /* En TV mantenemos Grid, hereda layout perfecto */
    
    /* IOS FIX TRANSPARENCIA */
    background: transparent !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    
    /* Sombra degradada para legibilidad */
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%) !important;
}

/* ICONOS FANTASMA EN VIDEO */
body.tv-mode-active .ghost-link i {
    color: rgba(255, 255, 255, 0.7) !important; 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)) !important; 
}

/* =================================================================== */
/*      3. FOOTER INFERIOR (DOCK)
/* =================================================================== */

.bottom-nav { 
    position: fixed;
    bottom: 0; left: 0; right: 0; 
    /* Altura reducida estilo TikTok */
    height: 60px; /* Un poco más alto para el degradado */
    min-height: 60px; 
    z-index: var(--z-nav); 
    
    /* ESTILO FANTASMA (Degradado sutil, sin bordes) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none; 
    box-shadow: none;
    
    display: flex;
    align-items: center;
    justify-content: space-around; /* Mantiene la separación */
    
    padding-bottom: var(--safe-area-bottom);
    transition: background 0.3s ease;
    pointer-events: none; /* Deja pasar clicks en áreas vacías */
}

.bottom-nav-btn { 
    background: transparent;
    border: none;
    /* Tamaño contenedor muy compacto */
    width: 40px; height: 40px; 
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    pointer-events: auto; /* Reactivar clicks en los botones */
}

.bottom-nav-btn i, 
.bottom-nav-btn span { 
    /* Iconos pequeños y finos con SOMBRA FANTASMA */
    font-size: 1.4rem; 
    color: #fff; 
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); /* La clave del efecto fantasma */
}

/* Estado Activo (La página actual) */
.bottom-nav-btn.active i { 
    color: #ffffff !important; /* Blanco Puro */
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.6));
}

/* BOTÓN CENTRAL (Especial) */
/* Lo hacemos un poco más grande, pero sigue siendo solo un icono */
.bottom-nav-btn.center-btn i,
#create-action-btn i {
    font-size: 2.4rem !important; /* Más grande que los demás */
    color: #ffffff !important;     /* Siempre blanco brillante */
    opacity: 1;
}

/* BOTÓN CENTRAL ACTIVO (Si se toca) */
.bottom-nav-btn.center-btn:active i {
    transform: scale(0.9);
}

/* AVATAR (Perfil) */
.nav-user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background-size: cover;
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.bottom-nav-btn.active .nav-user-avatar {
    border-color: #fff;
}

/* Avatar de usuario diminuto */
.nav-user-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #333;
    border: 1px solid #fff;
    /* FIX: Bajarlo fisicamente con margin-top para centrarlo */
    margin-top: 0; 
    flex-shrink: 0;
}
.bottom-nav-btn.active i {
    color: #FFD700; /* Tu amarillo solo cuando está activo */
}

.bottom-nav-btn.active .nav-user-avatar {
    border-color: var(--color-primary);
    transform: scale(1.1);
}

/* Badge de notificación (Punto rojo) */
.nav-badge-dot {
    position: absolute;
    top: 15px; right: 15px;
    width: 10px; height: 10px;
    background-color: var(--color-danger);
    border-radius: 50%;
    border: 2px solid #000;
    display: none;
}
.nav-badge-dot.show { display: block; }

/* =================================================================== */
/*      4. BOTÓN CENTRAL (XP / DOCK) - REPARADO
/* =================================================================== */

#create-action-btn { 
    appearance: none;
    background: transparent; /* Quitar fondo de color si es un icono img */
    border: none;
    
    /* MISMO TAMAÑO QUE LOS OTROS BOTONES */
    width: 60px; height: 60px; 
    
    /* ALINEACIÓN ESTÁNDAR (BAJARLO) */
    transform: none !important; /* Quitar la elevación */
    margin-bottom: 0;
    
    border-radius: 0; /* Si es un icono cuadrado transparente */
    display: flex; align-items: center; justify-content: center;
    box-shadow: none; /* Quitar brillo excesivo si molesta */
    cursor: pointer;
    z-index: calc(var(--z-nav) + 1);
}

/* Ajuste del icono dentro del botón central */
#create-action-btn i, 
#create-action-btn img,
#create-action-btn svg { 
    width: 100%; height: 100%;
    object-fit: contain;
    /* Si es font awesome */
    font-size: 1.8rem; 
    color: #0f0; /* Color verde/nuclear por defecto */
}
/* Ocultar elementos exclusivos de escritorio en móvil por defecto */
.desktop-feed-header {
    display: none;
}

/*      5. LÓGICA DE VISIBILIDAD (MODO TV)
/*      Controla cómo se ve el layout cuando estás viendo videos
/* =================================================================== */

/* Cuando el modo TV está activo (clase en body) */
body.tv-mode-active #comando-superior {
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    pointer-events: none; /* Deja pasar clicks al video */
}

/* En modo TV, permitimos clicks solo en los botones del header */
body.tv-mode-active #comando-superior .comando-btn {
    pointer-events: auto;
}

body.tv-mode-active .bottom-nav {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
}

/* =================================================================== */
/*      6. LÓGICA DE VISIBILIDAD (MODALES)
/*      Oculta la barra inferior si hay un modal full-screen
/* =================================================================== */

/* REGLA DE OCULTAMIENTO AUTOMÁTICO */
/* --- CORRECCIÓN CRÍTICA: Oculta Nav Top y Dock si cualquier modal principal (o el de bienvenida) está activo --- */
/* Se agregan selectores más fuertes para la visibilidad */
body:has(.welcome-modal-container),
body:has(.modal-overlay.show) {
    /* Ocultamos las barras, sin importar su contenedor. */
    #ghost-nav-top,
    .bottom-nav {
        display: none !important;
    }
}
/* --------------------------------------------------------------------------------- */
body:has(.modal-overlay.show) #create-action-btn,
body:has(.minimalist-overlay.show) #create-action-btn,
/* ESTA LÍNEA ES CRÍTICA: */
body:has(.composer-fullscreen-overlay) #create-action-btn, 
body:has(#visitor-profile-overlay) #create-action-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* =================================================================== */
/*      AJUSTES DE FEED INMERSIVO
/* =================================================================== */

/* Ajuste: Dejamos espacio para la barra superior (60px) + área segura */
.dashboard-feed-layout {
    /* Ajustado a la nueva altura (60px) */
    padding-top: calc(60px + env(safe-area-inset-top)) !important; 
    background-color: #000;
}

/* =================================================================== */
/*      PARCHE: BOTÓN CENTRAL FANTASMA (SIN VERDE, SIN FONDO)
/* =================================================================== */

#center-arcade-btn { 
    appearance: none !important;
    background: transparent !important; /* ADIÓS AL FONDO NEGRO */
    border: none !important; /* ADIÓS AL BORDE VERDE */
    border-radius: 0 !important;
    box-shadow: none !important; /* ADIÓS AL GLOW */
    
    /* Mismas dimensiones que los otros botones */
    width: 40px !important; 
    height: 40px !important; 
    margin: 0 !important;
    transform: none !important;
    
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    cursor: pointer;
    z-index: 200 !important;
    position: relative;
    pointer-events: auto !important;
}

/* MATAR EL NÚCLEO INTERNO (ANIMACIÓN) */
#center-arcade-btn::after {
    display: none !important;
    content: none !important;
}

/* REVIVIR EL ICONO (ESTABA OCULTO) */
#center-arcade-btn i, 
#center-arcade-btn img,
#center-arcade-btn svg { 
    display: block !important; /* LO FORZAMOS A APARECER */
    font-size: 1.4rem !important; 
    color: #fff !important; /* BLANCO PURO */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) !important; /* SOMBRA FANTASMA */
}
/* =========================================
   PULL TO REFRESH
   ========================================= */
.pull-refresh-indicator {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #FFD700;
    font-size: 1.5rem;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pull-refresh-indicator.refreshing {
    height: 60px;
}

.pull-icon {
    transition: transform 0.3s;
}
.pull-icon.rotate { transform: rotate(180deg); }
.pull-icon.spin { animation: spin 1s linear infinite; }

@keyframes spin { 100% { transform: rotate(360deg); } }

/* SEGURIDAD MÓVIL PARA LYRA (Base) */
#my-journey-sheet-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2147483647; background: #1e1e1e; /* Color base móvil */
    display: none; /* JS lo pone en block/flex */
}
#my-journey-sheet-overlay.show { display: block; }
/* =================================================================== */
/*      TEMA: MODO PASTEL (MUJER / LIGHT)
/*      Se activa cuando el body tiene la clase .theme-pastel
/* =================================================================== */

body.theme-pastel {
    background-color: #e0f2f1 !important; /* Verde Menta Fresco */
    color: #000000 !important; /* Negro Sólido */
}

/* 1. Ajuste de Tarjetas del Feed */
body.theme-pastel .feed-card {
    background-color: #ffffff !important; /* Blanco Limpio */
    border-bottom: 1px solid #f06292 !important; /* Rosa Pastel Definido */
    color: #000000 !important;
    box-shadow: 0 2px 5px rgba(240, 98, 146, 0.1); /* Sombra Rosada sutil */
}

/* 2. Textos en el Feed */
body.theme-pastel .t-name, 
body.theme-pastel .tv-username,
body.theme-pastel .tweet-text-body,
body.theme-pastel h1, 
body.theme-pastel h2, 
body.theme-pastel h3 {
    color: #000000 !important; /* Legibilidad total */
    font-weight: 600;
}

body.theme-pastel .t-handle, 
body.theme-pastel .t-time {
    color: #880e4f !important; /* Vino suave para metadatos */
}

/* 3. Acciones Sociales (Iconos) */
body.theme-pastel .t-action i,
body.theme-pastel .social-btn i {
    color: #9c27b0 !important; /* Morado Vibrante */
    text-shadow: none !important;
}
body.theme-pastel .t-action.like.active i,
body.theme-pastel .social-btn.applauded i {
    color: #e91e63 !important; /* Rosa Intenso al dar like */
}

/* 4. Barra Inferior (Dock) */
body.theme-pastel .bottom-nav {
    background: #ffffff !important;
    border-top: 2px solid #f06292 !important; /* Tope Rosa */
}

body.theme-pastel .bottom-nav-btn i {
    color: #ba68c8 !important; /* Morado Lavanda inactivo */
}

body.theme-pastel .bottom-nav-btn.active i {
    color: #9c27b0 !important; /* Morado Fuerte Activo */
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(156, 39, 176, 0.4));
}

/* 5. Ajustes Generales de Modales */
body.theme-pastel .modal-content,
body.theme-pastel .auth-card {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #f06292 !important; /* Marco Rosa */
}

body.theme-pastel input {
    background: #f3e5f5 !important; /* Lavanda muy claro */
    color: #000 !important;
    border: 1px solid #ce93d8 !important;
}

/* =================================================================== */
/*      PROTECCIÓN DE TV MODE (SIEMPRE DARK)
/*      Esto anula el Tema Pastel específicamente para el visor de video
/* =================================================================== */

body.theme-pastel .tv-overlay-container {
    background: #000 !important; /* Fondo Negro Sólido */
}

/* Forzar tarjeta TV a negro/transparente */
body.theme-pastel .feed-card.tv-mode {
    background-color: #000 !important;
    border-bottom: 1px solid #111 !important;
    box-shadow: none !important;
}

/* Textos en TV Mode (Siempre Blancos) */
body.theme-pastel .feed-card.tv-mode .tv-username,
body.theme-pastel .feed-card.tv-mode .tv-description,
body.theme-pastel .feed-card.tv-mode .read-more-trigger,
body.theme-pastel .feed-card.tv-mode i {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Botones laterales en TV (Restaurar estilos originales) */
body.theme-pastel .feed-card.tv-mode .social-btn i {
    color: #ffffff !important; /* Iconos blancos */
}

/* Botón activo (Aplauso) en TV - Amarillo original */
body.theme-pastel .feed-card.tv-mode .social-btn.applauded i {
    color: #FFD700 !important; 
}

/* Barra de progreso */
body.theme-pastel .tv-progress-container {
    background: rgba(255,255,255,0.2) !important;
}
body.theme-pastel .tv-progress-bar {
    background: #ffffff !important;
}

/* Botón Seguir en TV (Restaurar estilo dark) */
body.theme-pastel .tv-follow-pill {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
}
/* =================================================================== */
/*      FASE 2: DISEÑO ESCRITORIO - V16 (GEOMETRÍA RELATIVA)
/*      Solución Final: El contenido se ajusta al contenedor padre.
/*      Sin coordenadas fijas que rompan el diseño.
/* =================================================================== */

@media (min-width: 1024px) {

    /* 1. ESTRUCTURA BASE */
    body {
        background-color: #050505 !important; /* <--- CAMBIO AQUI */
        display: block !important;
        overflow: hidden; 
    }
    body.theme-pastel { background-color: #ffffff !important; }

    /* 2. OCULTAR LO MÓVIL */
    .bottom-nav, #ghost-nav-top, #center-arcade-btn, .tv-overlay-container, .mobile-only {
        display: none !important;
    }

    /* ========================================================= */
    /*   ALINEACIÓN CENTRADA PERFECTA (TRES COLUMNAS PEGADAS)    */
    /* ========================================================= */

    /* 1. COLUMNA IZQUIERDA (MENÚ) */
    #desktop-sidebar-left {
        display: flex !important; 
        flex-direction: column !important;
        position: fixed !important; 
        top: 0 !important; 
        
        /* ALINEACIÓN DESDE EL CENTRO HACIA LA IZQUIERDA */
        right: 50% !important; 
        /* 300px (mitad del feed) + 10px (aire) = 310px */
        margin-right: 310px !important; 
        
        width: 250px !important; /* Ancho estándar cómodo */
        height: 100vh !important; 
        padding: 20px 10px !important;
        z-index: 100; 
        
        /* IMPORTANTE: Esto empuja el texto y logos hacia el Feed (Derecha) 
           eliminando el "gran espacio" del lado izquierdo */
        align-items: flex-end !important; 
        
        background-color: #000000 !important;
    }
    
    /* Aseguramos que el contenido interno (la caja del menú) llene el ancho */
    .sidebar-content {
        width: 100%;
        max-width: 230px; /* Evita que se estire demasiado */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Los textos del menú se alinean normal */
    }


    /* 2. COLUMNA DERECHA (BUSCADOR Y TENDENCIAS) */
    #desktop-sidebar-right {
        display: block !important;
        position: fixed !important; 
        top: 0 !important; 
        
        /* ALINEACIÓN DESDE EL CENTRO HACIA LA DERECHA */
        left: 50% !important;
        /* 300px (mitad del feed) + 10px (aire) = 310px */
        margin-left: 310px !important; 
        
        /* ANCHO CORREGIDO: Ni muy ancho, ni muy delgado */
        width: 300px !important; 
        
        height: 100vh !important; 
        padding: 20px 0 !important;
        z-index: 100; 
        overflow-y: auto !important;
        
        background-color: #000000 !important; 
    }
    .sidebar-content { width: 100%; max-width: 250px; display: flex; flex-direction: column; height: 100%; }
    .desktop-logo img { width: 50px; margin-bottom: 20px; margin-left: 10px; }
    
    .d-nav-btn {
        background: transparent; border: none; color: #fff;
        font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 500;
        padding: 12px 24px; border-radius: 50px; cursor: pointer;
        display: flex; align-items: center; gap: 15px;
        transition: background 0.2s; margin-bottom: 8px; width: fit-content;
    }
    .d-nav-btn:hover { background-color: rgba(255,255,255,0.1); }
    .d-nav-btn.active { font-weight: 800; }
    .d-nav-btn i { font-size: 1.5rem; width: 30px; text-align: center; }

    .desktop-compose-btn {
        /* CAMBIO: Color Amarillo Solido (Marca) en vez de Rosa */
        background: #FFD700 !important; 
        color: #000000 !important; /* Texto negro para contraste */
        border: none;
        padding: 15px 0; width: 90%; border-radius: 50px; font-size: 1.1rem;
        font-weight: 800; cursor: pointer; margin-top: 20px;
        /* Sombra dorada suave */
        box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3); 
        transition: transform 0.2s, background 0.2s;
    }
    .desktop-compose-btn:hover {
        background: #e6c200 !important; /* Un poco más oscuro al pasar mouse */
    }
    .desktop-compose-btn:active { transform: scale(0.95); }

    .desktop-user-mini {
        margin-top: auto; display: flex; align-items: center; gap: 10px;
        padding: 10px; border-radius: 50px; cursor: pointer; color: #fff;
    }
    .desktop-user-mini:hover { background-color: rgba(255,255,255,0.1); }
    .d-user-info { display: flex; flex-direction: column; flex: 1; }
    .d-u-name { font-weight: 700; font-size: 0.9rem; }
    .d-u-handle { font-size: 0.8rem; color: #777; }

    /* 4. COLUMNA CENTRAL: CONTENEDOR MAESTRO (EL "VASO") */
    /* Este es el ÚNICO elemento que calculamos con coordenadas fijas */
    main.app-container {
        width: 600px !important;
        max-width: 600px !important;
        position: fixed;
        left: 50%;
        margin-left: -300px !important; /* CENTRO EXACTO */
        top: 0;
        height: 100vh !important;
        border-left: 1px solid #2f3336;
        border-right: 1px solid #2f3336;
        z-index: 50;
        background: #050505 !important; /* Antes era #000 */
       overflow-y: scroll !important; /* El scroll ocurre aquí */
        display: block !important;
    }

    /* ELIMINAR ESPACIO SUPERIOR EN ESCRITORIO */
    .dashboard-feed-layout {
        padding-top: 0 !important; /* Quitamos el hueco de 60px */
        min-height: 100vh;
    }

    .feed-card { 
        max-width: 100% !important; 
        border-bottom: 1px solid #2f3336;
        /* COMPACTACIÓN ESTILO X */
        padding: 10px 15px !important; /* Menos aire */
        font-size: 0.95rem !important; /* Letra más fina */
        /* --- CAMBIO AQUÍ --- */
        background: #050505 !important; 
        /* ------------------- */
    }

    .feed-card .tweet-media-wrapper img {
        object-fit: cover;
        width: 100%;
        height: auto;
    }

    /* ----------------------------------------------------------- */
    /* 4.5 HEADER DE ESCRITORIO (X STYLE) - FINAL                  */
    /* ----------------------------------------------------------- */
    
    .desktop-feed-header {
        display: block !important;
        background: #000;
        /* No border bottom here, el border lo tiene el composer */
    }

    /* PESTAÑAS (STICKY) */
    .desktop-tabs-sticky {
        display: flex;
        position: sticky;
        top: 0;
        background: rgba(0, 0, 0, 0.75); /* Transparencia estilo X */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 20;
        border-bottom: 1px solid #2f3336;
        cursor: pointer;
    }

    .d-tab {
        flex: 1; text-align: center; padding: 16px 0;
        color: #71767b; font-weight: 500; font-size: 0.95rem;
        transition: background 0.2s; position: relative;
    }
    .d-tab:hover { background: rgba(239, 243, 244, 0.1); }
    .d-tab.active { color: #fff; font-weight: 700; }
    .d-tab.active::after {
        content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
        width: 56px; height: 4px; background: #1d9bf0; border-radius: 2px;
    }

    /* COMPOSER INLINE (SCROLLEA CON EL FEED) */
    .desktop-inline-composer {
        display: flex; flex-direction: column;
        padding: 16px;
        border-bottom: 1px solid #2f3336;
        background: #050505 !important;
    }

    .dic-row-main { display: flex; gap: 12px; margin-bottom: 15px; }

    .dic-avatar {
        width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
        background-size: cover; background-position: center; background-color: #333;
    }

    .dic-input-wrapper { flex: 1; padding-top: 5px; }
    
    #inline-compose-text {
        width: 100%; background: transparent; border: none;
        color: #fff; font-size: 1.25rem; font-family: inherit;
        outline: none; resize: none; overflow: hidden;
    }
    #inline-compose-text::placeholder { color: #71767b; }

    .dic-bottom-row {
        display: flex; justify-content: space-between; align-items: center;
        padding-left: 52px; /* Alinear con el input (40px avatar + 12px gap) */
    }

    .dic-icons-left { display: flex; gap: 15px; font-size: 1rem; }
    .text-cyan { color: #1d9bf0; cursor: pointer; transition: color 0.2s; }
    .text-cyan:hover { color: #1a8cd8; }

    .dic-post-btn {
        background: #1d9bf0; color: #fff; border: none;
        padding: 8px 18px; border-radius: 20px; font-weight: 700;
        font-size: 0.95rem; cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
    }
    .dic-post-btn:disabled { cursor: default; }

    /* 5. COLUMNA DERECHA: EXTRAS (AJUSTADA Y ALINEADA) */
    /* 2. COLUMNA DERECHA (VERSIÓN SLIM / ANGOSTA) */
    #desktop-sidebar-right {
        display: block !important;
        position: fixed !important; 
        top: 0 !important; 
        
        /* ALINEACIÓN: SE MANTIENE PEGADA AL CENTRO */
        left: 50% !important;
        margin-left: 310px !important; 
        
        /* --- CAMBIO AQUÍ: REDUCCIÓN DRÁSTICA --- */
        width: 250px !important; /* Antes 300px, ahora mucho más fina */
        /* -------------------------------------- */
        
        height: 100vh !important; 
        padding: 20px 0 !important;
        z-index: 100; 
        overflow-y: auto !important;
        
        background-color: #000000 !important; 
    }

    /* AJUSTE EXTRA: Para que el buscador se vea bien en espacio pequeño */
    .desktop-search-bar {
        padding: 8px 10px !important; /* Menos relleno */
        font-size: 0.8rem !important; /* Letra un poco más chica */
    }
    
    .desktop-search-bar i {
        font-size: 0.9rem !important; /* Lupa más pequeña */
    }
    .desktop-search-bar input { background: transparent; border: none; color: #fff; width: 100%; outline: none; }
    .desktop-search-bar i { color: #71767b; }
    .desktop-card {
        background: #16181c; border-radius: 16px; margin-bottom: 20px;
        overflow: hidden; border: 1px solid #2f3336;
    }
    .desktop-card h3 { padding: 12px 16px; margin: 0; font-size: 1.1rem; color: #fff; font-weight: 800; }
    .trend-item { padding: 12px 16px; cursor: pointer; transition: background 0.2s; }
    .trend-item:hover { background: rgba(255,255,255,0.03); }
    .trend-meta { font-size: 0.8rem; color: #71767b; }
    .trend-title { font-weight: 700; color: #fff; margin: 2px 0; }
    .trend-count { font-size: 0.8rem; color: #71767b; }
    .desktop-footer-links { padding: 0 16px; font-size: 0.8rem; color: #71767b; line-height: 1.5; }
    .desktop-footer-links a { color: #71767b; text-decoration: none; }

    
    /* ----------------------------------------------------------- */
    /* 6. MANEJO DE PÁGINAS (LA CLAVE DEL ÉXITO) */
    /* ----------------------------------------------------------- */
    
    /* Todas las páginas (Dashboard, Perfil, etc) son HIJAS del contenedor main */
    /* Por lo tanto, solo deben llenar el espacio (width: 100%) */
    
    .page {
        width: 100% !important;
        min-height: 100vh;
        display: none; /* Ocultas por defecto */
        position: relative !important; /* NO FIXED: Fluyen dentro del main */
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        background: #000;
    }

    /* La página activa se muestra */
    .page.active {
        display: block !important;
        z-index: 1;
    }

    /* Regla de Seguridad: Si el dashboard NO tiene la clase active, pero ninguna otra página está visible, 
       podríamos forzarlo, pero confiamos en que el JS añade .active correctamente. */
    #page-dashboard.active { display: block !important; }

    /* ----------------------------------------------------------- */
    /* 7. ESTILIZADO ESPECÍFICO DEL PERFIL (ESTILO TRUTH) */
    /* ----------------------------------------------------------- */
    
    /* Ya no necesita posición fija, solo estilos visuales internos */
    #page-profile {
        padding-bottom: 50px;
    }

    #page-profile .profile-sheet-content {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important; margin: 0 !important;
    }
    #page-profile .m1-banner { height: 200px !important; width: 100% !important; border-radius: 0 !important; }
    #page-profile .m1-header-section { padding: 0 20px !important; text-align: left !important; position: relative; }
    #page-profile .m1-avatar-wrapper {
        width: 130px !important; height: 130px !important;
        margin: -65px 0 10px 0 !important;
        border: 4px solid #000 !important; border-radius: 50% !important;
        z-index: 10; background: #000;
    }
    body.theme-pastel #page-profile .m1-avatar-wrapper { border-color: #fff !important; background: #fff; }
    #page-profile .m1-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    
    #page-profile .m1-top-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; margin-bottom: 10px; }
    #page-profile .m1-action-btn {
        margin: 10px 0 0 0 !important;
        background: transparent !important; border: 1px solid #536471 !important; color: #fff !important;
        font-weight: 700; padding: 8px 20px !important; border-radius: 50px !important; font-size: 0.9rem !important;
    }
    #page-profile .m1-action-btn:hover { background: rgba(255,255,255,0.1) !important; }

    #page-profile .m1-text-info { text-align: left !important; margin-top: 5px !important; }
    #page-profile .m1-name { font-size: 1.5rem !important; font-weight: 800 !important; margin-bottom: 2px !important; }
    #page-profile .m1-handle { color: #71767b !important; font-size: 1rem !important; display: block; margin-bottom: 15px !important; }
    #page-profile .m1-bio { font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 15px !important; }
    #page-profile .m1-stats-row { justify-content: flex-start !important; gap: 20px !important; border: none !important; padding: 0 !important; margin-bottom: 20px !important; }
    #page-profile .m1-tabs { border-bottom: 1px solid #2f3336 !important; margin-top: 10px; }
    #page-profile .m1-tab {
        flex: 1; padding: 15px 0 !important; font-size: 1rem !important; color: #71767b !important;
        border-radius: 0 !important; background: transparent !important; border-bottom: 4px solid transparent;
    }
    #page-profile .m1-tab.active { color: #fff !important; font-weight: 700 !important; border-bottom: 4px solid #ff4081 !important; }
    #page-profile .m1-tab:hover { background: rgba(255,255,255,0.05) !important; }

    /* 8. MODALES GLOBALES (Estos SÍ son pantalla completa) */
    .modal-overlay, #visitor-profile-overlay, #user-profile-modal-overlay, .profile-modal-overlay, #initial-loading-overlay, .composer-fullscreen-overlay {
        width: 100vw !important; height: 100vh !important;
        left: 0 !important; top: 0 !important; margin: 0 !important;
        z-index: 9999 !important; display: flex !important;
        justify-content: center; align-items: center;
    }

    /* 9. ADAPTACIÓN TEMA PASTEL */
    body.theme-pastel .d-nav-btn { color: #000; }
    body.theme-pastel .d-nav-btn:hover { background-color: rgba(0,0,0,0.05); }
    body.theme-pastel .desktop-user-mini { color: #000; }
    body.theme-pastel .desktop-user-mini:hover { background-color: rgba(0,0,0,0.05); }
    
    body.theme-pastel main.app-container,
    body.theme-pastel #page-profile.active {
        background: #fff !important;
        border-left: 1px solid #eff3f4;
        border-right: 1px solid #eff3f4;
    }
    body.theme-pastel .feed-card { border-bottom: 1px solid #eff3f4; }
    body.theme-pastel .desktop-search-bar { background: #eff3f4; }
    body.theme-pastel .desktop-search-bar input { color: #000; }
    body.theme-pastel .desktop-card { background: #f7f9f9; border: 1px solid #eff3f4; }
    body.theme-pastel .desktop-card h3,
    body.theme-pastel .trend-title { color: #0f1419; }
    body.theme-pastel .trend-item:hover { background: rgba(0,0,0,0.03); }
    
    /* Perfil Pastel */
    body.theme-pastel #page-profile .m1-action-btn { border-color: #cfd9de !important; color: #000 !important; }
    body.theme-pastel #page-profile .m1-action-btn:hover { background: rgba(0,0,0,0.05) !important; }
    body.theme-pastel #page-profile .m1-tab { color: #536471 !important; }
    body.theme-pastel #page-profile .m1-tab.active { color: #000 !important; }
    body.theme-pastel #page-profile .m1-tab:hover { background: rgba(0,0,0,0.05) !important; }

    ::-webkit-scrollbar { width: 0px; background: transparent; }
}
.close-modal-x:hover {
    background: rgba(255, 0, 0, 0.3) !important;
    color: #ff4444 !important;
}

/* =================================================================== */
/*      ANIMACIÓN LOGO SIDEBAR (BAMBOLEO & CENTRADO)
/* =================================================================== */

@keyframes logo-wobble {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-5deg); }
    30% { transform: rotate(4deg); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
}

/* Aplicar al contenedor del logo en escritorio */
#desktop-sidebar-left .desktop-logo {
    display: flex !important;
    justify-content: center !important; /* Centrado Horizontal */
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 30px !important;
}

#desktop-sidebar-left .desktop-logo img {
    animation: logo-wobble 3s ease-in-out infinite; /* Animación infinita suave */
    width: 60px !important; /* Ajuste de tamaño si es necesario */
    margin: 0 !important; /* Quitar margenes viejos */
}
/* --- PARCHE DE VISIBILIDAD FORZADA PARA PERFIL --- */
#page-profile.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* En escritorio, aseguramos posición */
@media (min-width: 1024px) {
    #page-profile.active {
        position: fixed !important;
        left: 50% !important;
        margin-left: -300px !important;
        width: 600px !important;
        z-index: 900 !important; /* Muy alto para asegurar que tape el feed */
        background: #000 !important;
    }
}
/* ========================================================= */
    /* FIX: MODO TV/VIRAL EN ESCRITORIO (VERSIÓN CORREGIDA)      */
    /* ========================================================= */
    
    /* 1. CONTENEDOR CENTRAL: Mantiene su geometría de 600px, solo cambia el fondo */
    body.tv-mode-active main.app-container {
        background: #000 !important;
        /* NO forzamos position fixed aquí porque ya lo tiene el layout general */
        /* Esto evita que se "desconecte" del flujo */
    }

    /* 2. LA TARJETA DEL VIDEO: Aquí está el secreto. 
       En móvil es 'fixed' (pantalla completa). 
       En escritorio la forzamos a 'relative' para que entre en la columna. */
    body.tv-mode-active .feed-card.tv-mode {
        position: relative !important; /* IMPORTANTE: Deja de ser pantalla completa */
        width: 100% !important;        /* Se adapta a los 600px */
        height: 600px !important;      /* Altura fija cómoda para escritorio */
        margin-bottom: 20px !important;
        border-radius: 12px !important; /* Bordes redondeados estéticos */
        overflow: hidden !important;
        z-index: 1;
        border: 1px solid #333;
    }

    /* 3. EL VIDEO: Llenar la tarjeta */
    body.tv-mode-active .feed-card.tv-mode video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 4. LA CAPA DE DATOS (Texto, Botones de Like, etc.) */
    /* NO la ocultamos (ese fue mi error), la confinamos a la tarjeta */
    body.tv-mode-active .tv-overlay-container {
        display: block !important;     /* MOSTRAR SIEMPRE */
        position: absolute !important; /* Pegado a la tarjeta, no a la ventana */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Ajuste de los botones laterales para que no se salgan */
    body.tv-mode-active .tv-actions-right {
        position: absolute !important;
        right: 10px !important;
        bottom: 80px !important; /* Subirlos un poco */
    }

    /* Ajuste del texto inferior */
    body.tv-mode-active .tv-info-bottom {
        position: absolute !important;
        bottom: 10px !important;
        left: 10px !important;
        width: 80% !important;
    }

    /* 5. OCULTAR ELEMENTOS QUE ESTORBAN (Solo navegación global) */
    body.tv-mode-active #ghost-nav-top,
    body.tv-mode-active .bottom-nav {
        display: none !important;
    }

    /* 6. ASEGURAR QUE LAS COLUMNAS LATERALES SE VEAN */
    body.tv-mode-active #desktop-sidebar-left,
    body.tv-mode-active #desktop-sidebar-right {
        display: flex !important;
        z-index: 100 !important;
    }
/* =================================================================== */
/*      REPARACIÓN TOTAL PERFIL & LYRA (MÓVIL + DESKTOP)
/* =================================================================== */

/* 1. BASE (MÓVIL FIRST) - Esto arregla tu celular */
.profile-universal-layout {
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-uni-header {
    height: 53px;
    display: flex; align-items: center; gap: 20px;
    padding: 0 15px;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 10;
    border-bottom: 1px solid #2f3336;
}

.uni-back-btn {
    background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.uni-back-btn:hover { background: rgba(255,255,255,0.1); }

.uni-header-text { display: flex; flex-direction: column; }
.uni-top-name { font-weight: 700; font-size: 1.1rem; color: #fff; }
.uni-top-meta { font-size: 0.8rem; color: #71767b; }

.profile-uni-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
}

.uni-banner {
    width: 100%; height: 150px; /* Altura móvil */
    background-color: #333; background-size: cover; background-position: center;
}

.uni-info-section { padding: 12px 15px; position: relative; }

.uni-avatar-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-top: -50px; /* Subir sobre banner */
    margin-bottom: 10px;
}

.uni-avatar-container {
    width: 80px; height: 80px;
    border-radius: 50%; border: 3px solid #000;
    background: #000; overflow: hidden;
}
.uni-avatar-container img { width: 100%; height: 100%; object-fit: cover; }

.uni-edit-btn {
    margin-top: 40px; /* Ajuste visual */
    background: transparent; border: 1px solid #536471;
    color: #fff; font-weight: 700; padding: 6px 16px;
    border-radius: 20px; font-size: 0.9rem; cursor: pointer;
    display: none;
}

.uni-text-data h2 { margin: 0; font-weight: 800; font-size: 1.4rem; color: #fff; }
.uni-text-data #sheet-handle { color: #71767b; margin-bottom: 10px; }
.uni-text-data #sheet-bio { color: #fff; font-size: 0.95rem; margin-bottom: 10px; }

.uni-meta-row { color: #71767b; font-size: 0.9rem; margin-bottom: 10px; }
.uni-stats-row { display: flex; gap: 15px; color: #71767b; font-size: 0.9rem; }
.uni-stats-row strong { color: #fff; }

.uni-tabs { display: flex; border-bottom: 1px solid #2f3336; margin-top: 10px; }
.uni-tab {
    flex: 1; padding: 15px 0; background: none; border: none;
    color: #71767b; font-weight: 500; cursor: pointer;
    position: relative;
}
.uni-tab.active { color: #fff; font-weight: 700; }
.uni-tab.active::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 50%; height: 4px; background: #1d9bf0; border-radius: 2px;
}

.uni-feed-container { min-height: 300px; padding-bottom: 50px; }


/* 2. REGLAS LYRA (RESCATE) */
#my-journey-sheet-overlay {
    /* Móvil por defecto */
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: #1e1e1e !important;
    z-index: 2147483647 !important;
    display: none; /* JS lo pone flex/block */
    margin: 0 !important;
}
#my-journey-sheet-overlay.show { display: flex !important; }


/* 3. OVERRIDES DESKTOP (Esto arregla tu PC) */
@media (min-width: 1024px) {
    /* Centrar Perfil */
    #page-profile.active {
        position: fixed !important;
        top: 0 !important; left: 50% !important;
        margin-left: -300px !important;
        width: 600px !important;
        border-left: 1px solid #333;
        border-right: 1px solid #333;
        z-index: 1000 !important;
    }

    .uni-banner { height: 200px; }
    .uni-avatar-container { width: 130px; height: 130px; margin-top: -75px; border: 4px solid #000; }
    .uni-edit-btn { margin-top: 55px; }

    /* Centrar Lyra */
    #my-journey-sheet-overlay {
        background: rgba(0,0,0,0.8) !important; /* Dimmed background */
        display: flex !important; align-items: center; justify-content: center;
    }
    
    /* Contenedor interno de Lyra */
    #my-journey-sheet-overlay .content-area {
        width: 600px !important;
        height: 90vh !important;
        max-height: 800px;
        border-radius: 16px;
        border: 1px solid #333;
        position: relative !important;
        /* Resetear posiciones fijas */
        top: auto !important; left: auto !important;
    }
}
/* =================================================================== */
/*      REPARACIÓN FINAL: LYRA & PERFIL (MÓVIL vs DESKTOP)
/* =================================================================== */

/* 1. MÓVIL (Por defecto) */
#my-journey-sheet-overlay,
#page-profile {
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important;
    background: #000 !important;
    z-index: 2147483647 !important;
    display: none; /* JS lo activa */
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
}

#my-journey-sheet-overlay.show,
#page-profile.active {
    display: flex !important; /* Flex para Lyra, block para Perfil */
    flex-direction: column;
}
#page-profile.active { display: block !important; } /* Perfil es bloque */


/* 2. ESCRITORIO (Solo si la pantalla es grande) */
@media (min-width: 1024px) {
    
    /* LYRA (Centrado y Oscuro transparente de fondo) */
    #my-journey-sheet-overlay {
        background: rgba(0, 0, 0, 0.85) !important; /* Fondo dimmed */
        align-items: center;
        justify-content: center;
    }
    
    /* La tarjeta interna de Lyra */
    #my-journey-sheet-overlay .content-area {
        width: 500px !important;
        height: 85vh !important;
        max-height: 800px;
        border: 1px solid #333;
        border-radius: 20px;
        position: relative !important;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }

    /* PERFIL (Columna Central Fija) */
    #page-profile.active {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        margin-left: -300px !important; /* Centrado exacto */
        width: 600px !important;
        border-left: 1px solid #2f3336;
        border-right: 1px solid #2f3336;
        z-index: 100 !important; /* Debajo de modales */
    }
}
/* ================================================================= */
/* 🚀 CÓDIGO MAESTRO FINAL: TV MODE (MOVIL + ESCRITORIO)             */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/* 0. REGLA DE SEGURIDAD GLOBAL (INTEGRADA)                          */
/* ----------------------------------------------------------------- */
/* Si el modo TV no está activo, el overlay desaparece y no molesta */
body:not(.tv-mode-active) #tv-feed-overlay,
body:not(.tv-mode-active) .tv-overlay-container {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* ----------------------------------------------------------------- */
/* 📱 1. MÓVIL: FULL SCREEN + BARRAS VISIBLES                        */
/* ----------------------------------------------------------------- */
@media screen and (max-width: 1023px) {

    /* A. RESTAURAR BARRA SUPERIOR (GRID) */
    #ghost-nav-top,
    body.tv-mode-active #ghost-nav-top {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 2147483647 !important;
        background: rgba(0, 0, 0, 0.6) !important; /* Fondo oscuro simple */
        visibility: visible !important;
        transform: none !important;
        border: none !important;
    }

    /* B. RESTAURAR BARRA INFERIOR (FLEX) */
    .bottom-nav,
    body.tv-mode-active .bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 2147483647 !important;
        background: rgba(0, 0, 0, 0.85) !important;
        visibility: visible !important;
        transform: none !important;
        border-top: 1px solid #333 !important;
    }

    /* C. EXCEPCIÓN PERFIL (Ocultar solo la superior en perfil) */
    body:has(#page-profile.active) #ghost-nav-top,
    body.tv-mode-active:has(#page-profile.active) #ghost-nav-top {
        display: none !important;
    }
    #page-profile.active .profile-uni-header {
        top: 0 !important;
        padding-top: env(safe-area-inset-top) !important;
    }

    /* D. VIDEO 100% (SIN BORDES CHATOS) */
    body.tv-mode-active main.app-container {
        position: fixed !important;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background: #000; z-index: 50;
        overflow-y: scroll !important;
        scroll-snap-type: y mandatory !important;
        padding: 0 !important; margin: 0 !important;
    }

    body.tv-mode-active .feed-card.tv-mode {
        position: relative !important;
        width: 100vw !important;
        height: 100vh !important;
        
        /* CERO BORDES, CERO MARGENES */
        margin: 0 !important; 
        border: none !important;
        border-radius: 0 !important; /* Cuadrado perfecto */
        
        background: #000 !important; 
        z-index: 1;
        scroll-snap-align: start; scroll-snap-stop: always;
    }

    /* E. CONTENIDO VIDEO (LLENAR PANTALLA) */
    body.tv-mode-active video, 
    body.tv-mode-active .tweet-media-wrapper {
        width: 100% !important; 
        height: 100% !important;
        object-fit: cover !important; /* ESTO QUITA LO ACHATADO */
        border-radius: 0 !important;
    }

    /* Subir textos para que la barra inferior no los tape */
    body.tv-mode-active .tv-info-bottom { padding-bottom: 70px !important; }
}

/* ----------------------------------------------------------------- */
/* 💻 2. ESCRITORIO: ESTILO LIMPIO + COLORES ORIGINALES              */
/* ----------------------------------------------------------------- */
@media screen and (min-width: 1024px) {

    /* A. FONDO (Overlay) */
    #tv-feed-overlay.show, .tv-overlay-container {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100vw !important; height: 100vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 5000 !important;
        
        /* Transparencia para ver el color de fondo original de tu app */
        background: rgba(0, 0, 0, 0.85) !important; 
        backdrop-filter: blur(8px);
    }

    /* B. EL "CELULAR" (Contenedor Central) */
    #tv-scroll-container {
        display: block !important;
        position: relative !important;
        width: 400px !important;
        height: 85vh !important;
        max-height: 880px !important;
        
        /* Sin bordes grises feos, solo una sombra limpia */
        background: #000 !important;
        border: none !important; 
        border-radius: 20px !important; /* Curva suave */
        box-shadow: 0 30px 80px rgba(0,0,0,0.8) !important;
        
        overflow-y: auto !important;
        scrollbar-width: none;
        scroll-snap-type: y mandatory;
    }

    /* C. TARJETAS LIMPIAS */
    body.tv-mode-active .feed-card.tv-mode {
        width: 100% !important; height: 100% !important;
        position: relative !important; margin: 0 !important;
        
        /* Sin bordes internos */
        border: none !important;
        background: #000;
        
        scroll-snap-align: start; scroll-snap-stop: always;
    }

    /* D. VIDEO LLENO (SIN BORDES RAROS) */
    body.tv-mode-active video, 
    body.tv-mode-active .tweet-media-wrapper {
        width: 100% !important; height: 100% !important;
        
        /* COVER llena todo el espacio sin deformar ni dejar huecos */
        object-fit: cover !important; 
        
        /* Hereda las curvas del contenedor */
        border-radius: 0 !important; 
    }

    /* E. SIDEBARS (MENU Y WIDGETS) VISIBLES */
    body.tv-mode-active #desktop-sidebar-left {
        display: flex !important; flex-direction: column !important;
        position: fixed !important; top: 0 !important;
        right: 50% !important; margin-right: 320px !important;
        width: 275px !important; height: 100vh !important;
        z-index: 99999 !important; pointer-events: auto !important;
        background: transparent !important;
    }

    body.tv-mode-active #desktop-sidebar-right {
        display: block !important;
        position: fixed !important; top: 0 !important;
        left: 50% !important; margin-left: 320px !important;
        width: 350px !important; height: 100vh !important;
        z-index: 99999 !important; pointer-events: auto !important;
        background: transparent !important;
        overflow-y: auto !important;
    }

    /* F. LIMPIEZA FINAL */
    /* No tocamos el background-color del body para mantener tus colores */
    body.tv-mode-active { overflow: hidden !important; }
    
    /* Ocultar cosas de móvil en PC */
    body.tv-mode-active #ghost-nav-top, 
    body.tv-mode-active .bottom-nav { display: none !important; }
}
/* =================================================================== */
/*      7. MENÚ FLOTANTE "MÁS" (CORREGIDO)
/* =================================================================== */

#desktop-more-menu {
    display: none; /* Oculto por defecto */
    position: fixed;
    /* Coordenadas fijas para asegurar visibilidad */
    bottom: 80px;  /* En lugar de top, usamos bottom para que no se salga */
    left: 280px;   /* A la derecha de la barra lateral (que mide aprox 275px) */
    width: 240px;
    background: #000 !important; /* Forzar fondo negro */
    border: 1px solid #333;
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); /* Sombra fuerte */
    z-index: 2147483647 !important; /* MÁXIMA PRIORIDAD (Encima de todo) */
    flex-direction: column;
    padding: 10px 0;
}

#desktop-more-menu.show {
    display: flex !important; /* Forzar visualización */
    animation: fadeInMenu 0.2s ease-out;
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.d-menu-item {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 15px 20px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background 0.2s;
    width: 100%;
}

.d-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.d-menu-item i { width: 25px; text-align: center; }

/* Ajuste Pastel */
body.theme-pastel #desktop-more-menu { background: #fff !important; border: 1px solid #ccc; }
body.theme-pastel .d-menu-item { color: #000; }
body.theme-pastel .d-menu-item:hover { background-color: #eee; }
/* ========================================================= */
    /*   MODO "TODO NEGRO" (FULL BLACK) - CORRECCIÓN TOTAL       */
    /* ========================================================= */

    /* 1. Fondo General y Barras Laterales */
    body, 
    #desktop-sidebar-left,
    #desktop-sidebar-right {
        background-color: #000000 !important;
        background: #000000 !important;
    }

    /* 2. Columna Central */
    main.app-container,
    .dashboard-feed-layout {
        background-color: #000000 !important;
    }

    /* 3. CORRECCIÓN DERECHA: Las tarjetas (Tendencias, Sugerencias) */
    /* Actualmente son grises, las pasamos a negro */
    .desktop-card {
        background-color: #000000 !important; /* Adiós gris */
        border: 1px solid #333 !important;    /* Mantenemos borde sutil para que se note la caja */
    }

    /* 4. CORRECCIÓN DERECHA: Barra de Búsqueda */
    .desktop-search-bar {
        background-color: #000000 !important; /* Adiós gris */
        border: 1px solid #333 !important;
    }
    
    .desktop-search-bar input {
        background-color: transparent !important;
    }
    /* ========================================================= */
/*   EFECTO "FROSTED GLASS" PARA IMÁGENES (ADIÓS BARRAS NEGRAS) */
/* ========================================================= */

.tweet-media-wrapper {
    position: relative !important;
    overflow: hidden !important;
    
    /* Configuración del fondo para que se expanda */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Color de respaldo por si no hay imagen */
    background-color: #111 !important; 
    
    border-radius: 12px; /* Redondear bordes del contenedor */
    margin-top: 10px;
    
    /* Altura máxima para que las verticales no rompan el feed */
    max-height: 600px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* LA CAPA DIFUMINADA (EL TRUCO) */
.tweet-media-wrapper::before {
    content: "";
    position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    
    /* Hereda la misma imagen que pusimos en el JS */
    background-image: inherit; 
    background-size: cover;
    background-position: center;
    
    /* EL EFECTO: Desenfoque fuerte + Oscurecimiento */
    filter: blur(30px) brightness(0.4) saturate(1.2); 
    
    z-index: 0; /* Se queda atrás */
}

/* LA IMAGEN REAL (NÍTIDA) */
.tweet-media-wrapper img,
.tweet-media-wrapper video {
    position: relative !important;
    z-index: 1 !important; /* Se pone enfrente */
    
    /* Esto hace que la imagen se ajuste sin cortarse */
    object-fit: contain !important; 
    
    width: 100% !important;
    height: 100% !important;
    max-height: 600px; /* Coincide con el contenedor */
    
    /* Sombra para separarla del fondo borroso */
    box-shadow: 0 0 30px rgba(0,0,0,0.5); 
    background: transparent !important;
}
/* =================================================================== */
/*      PARCHE DE EMERGENCIA: REVIVIR SCROLL + GRIS FANTASMA
/* =================================================================== */

/* 1. REVIVIR EL SCROLL (ESTO DESBLOQUEA LA BARRA) */
/* Le damos prioridad máxima a la orden de esconderse */
#ghost-nav-top.nav-hidden {
    transform: translateY(-100%) !important;
}

/* 2. ESTILO GRIS FANTASMA (MATAR COLORES) */
#ghost-nav-top .ghost-link:not([data-action="open-own-profile"]) i {
    color: rgba(255, 255, 255, 0.5) !important; /* Gris */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,1)) !important; /* Sombra negra */
    text-shadow: none !important; /* Adiós neón */
}

/* 3. PERFIL INTACTO (CONTORNO BLANCO) */
#top-btn-profile {
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15) !important;
    opacity: 1 !important;
}
/* =================================================================== */
/*      PARCHE: BARRA INFERIOR (APAGADO/ENCENDIDO)
/* =================================================================== */

/* 1. ESTADO BASE: TODO GRIS (APAGADO) */
/* Afecta a botones normales y al central (+) */
.bottom-nav-btn i,
#center-arcade-btn i {
    color: rgba(255, 255, 255, 0.5) !important; /* Gris Fantasma */
    filter: none !important; /* Sin brillo */
    text-shadow: none !important;
    transition: color 0.2s ease, transform 0.1s ease;
}

/* 2. ESTADO ACTIVO: BLANCO (PRENDIDO) */
/* Se activa cuando la app le pone la clase .active al botón */
.bottom-nav-btn.active i,
#center-arcade-btn.active i {
    color: #ffffff !important; /* Blanco Puro */
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) !important; /* Glow Blanco */
    transform: scale(1.1); /* Ligeramente más grande */
}

/* 3. ESTADO PRESIONADO: FLASH BLANCO (FEEDBACK) */
/* Efecto inmediato al tocar con el dedo */
.bottom-nav-btn:active i,
#center-arcade-btn:active i {
    color: #ffffff !important;
    transform: scale(0.9); /* Efecto de pulsación */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) !important;
}