/* =================================================================== */
/*      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;
    /* FONDO #050505 (NEGRO ELEGANTE) */
    background-color: #050505 !important;
}

/* Contenedor Principal */
main.app-container {
    width: 100vw;
    height: 100dvh;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-base);

    /* ASEGURAR FONDO EN EL SCROLL */
    background-color: #050505 !important;

    /* 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: 100vh;
    /* FIX: Asegurar altura mínima de pantalla completa */
    background-color: #050505;
    /* FIX: Asegurar fondo visible */
}

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

/* =================================================================== */
/*      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: WHITE ICONS + ULTRA WIDE RED TRIANGLE
/* =================================================================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    min-height: 60px;
    z-index: 2147483647 !important;

    /* Si es Pastel usa Blanco, si no, usa el Gradiente Negro */
    /* Usamos una variable CSS. Si no está definida, usa el negro por defecto */
    background: var(--bottom-nav-bg, linear-gradient(to top, #000000 10%, rgba(0, 0, 0, 0.95) 100%)) !important;
    border-top: 1px solid #333 !important;

    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
}

/* --- BOTONES LATERALES (BLANCO PURO) --- */
.bottom-nav-btn {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
}

/* Selector para todo menos el triángulo central */
.bottom-nav-btn:not([data-action="open-gamer-menu"]) i {
    color: #ffffff !important;
    /* CAMBIO: BLANCO */
    font-size: 1.4rem !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)) !important;
    opacity: 0.9 !important;
    transition: all 0.2s ease !important;
}

/* Estado Activo / Hover (Brillo Blanco Intenso) */
.bottom-nav-btn:not([data-action="open-gamer-menu"]).active i {
    opacity: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* --- BOTÓN CENTRAL: TRIÁNGULO ROJO ULTRA ANCHO --- */
.triangle-btn-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

/* FORZAR ANCHO CON ID PARA EVITAR ERRORES */
#btn-gamer-center .gamer-triangle,
.gamer-triangle {
    width: 180px !important;
    height: 36px !important;

    /* CAMBIO: VERDE NEÓN INTENSO */
    background: linear-gradient(180deg, #00ff00 0%, #00cc00 100%) !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;

    display: flex;
    justify-content: center;
    align-items: flex-start !important;
    padding-top: 3px !important;

    /* BRILLO INTERNO Y EXTERNO */
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.6), 0 0 15px rgba(0, 255, 0, 0.6);
    
    /* ANIMACIÓN PARA HACERLO LLAMATIVO */
    animation: neon-pulse-green 2s infinite ease-in-out;
    transition: all 0.1s ease-in-out; /* Transición rápida para el click */
}

/* ANIMACIÓN DE RESPIRACIÓN NEÓN */
@keyframes neon-pulse-green {
    0% { filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 15px rgba(0, 255, 0, 1)); }
    100% { filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.5)); }
}

.triangle-text {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    color: #000000 !important; /* TEXTO NEGRO PARA CONTRASTE CON EL VERDE */
    text-shadow: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ESTADO ACTIVO: BLANCO BRILLANTE AL PULSAR */
.bottom-nav-btn[data-action="open-gamer-menu"]:active .gamer-triangle {
    transform: scale(0.95);
    background: #ffffff !important; /* BLANCO PURO */
    box-shadow: 0 0 30px #ffffff, inset 0 0 10px #ccc !important; /* GLOW BLANCO EXTREMO */
    filter: brightness(1.5);
    animation: none; /* Pausar animación al pulsar */
}

/* Punto Rojo de Notificación */
.nav-badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 5px #ff0000;
    display: none;
}

.nav-badge-dot.show {
    display: block;
}

@keyframes pulse-dot {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7);
    }

    70% {
        transform: scale(1.2);
        box-shadow: 0 0 15px 5px rgba(255, 0, 85, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 85, 0);
    }
}

/* =================================================================== */
/*      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) - PARCHEADO
/* =================================================================== */

/* 1. REGLA DE OCULTAMIENTO (MODIFICADA): SOLO OCULTA LA BARRA DE ARRIBA */
body:has(.welcome-modal-container),
body:has(.modal-overlay.show) {
    #ghost-nav-top {
        display: none !important;
    }

    /* HEMOS BORRADO LA REFERENCIA A .bottom-nav AQUI */
}

/* 2. EL PARCHE NUCLEAR (CORREGIDO: SOLO MÓVIL) */
@media screen and (max-width: 1023px) {
    body:not(.hide-nav-force) .bottom-nav,
    body.logged-in:not(.hide-nav-force) .bottom-nav,
    body:not(.hide-nav-force):has(.modal-overlay.show) .bottom-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 2147483647 !important;
        background: var(--bottom-nav-bg, linear-gradient(to top, #000000 10%, rgba(0, 0, 0, 0.95) 100%)) !important;
        border-top: 1px solid #333 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* LA CONTRA-REGLA: OCULTAMIENTO ABSOLUTO */
body.hide-nav-force .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* 3. EMPUJAR EL CONTENIDO DEL JUEGO PARA QUE NO TAPE LA BARRA */
.modal-overlay,
.arcade-menu {
    padding-bottom: 80px !important;
    /* BAJAMOS EL Z-INDEX DEL MODAL UN POCO PARA QUE LA BARRA GANE */
    z-index: 2147483640 !important;
}

/* FUERZA BRUTA (DOMADA: SOLO MÓVIL) */
@media screen and (max-width: 1023px) {
    body:not(.hide-nav-force):has(.modal-overlay.show) .bottom-nav,
    body:not(.hide-nav-force) .bottom-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 2147483647 !important;
    }
}

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

/* NÚCLEO DEL REACTOR (AURA CYBER-GOLD) */
#center-arcade-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

/* ESTADO ACTIVO: EL BOTÓN "RECOGE" LA ENERGÍA */
#center-arcade-btn.level-up-flash {
    animation: arcade-pulse 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes arcade-pulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.3);
        filter: brightness(2) drop-shadow(0 0 20px #FFD700);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* --- ANIMACIÓN MATRIX DATA SYNC (VERDE) --- */
#center-arcade-btn.data-sync-active {
    animation: matrix-sync 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes matrix-sync {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px #00ff00);
    }

    50% {
        transform: scale(1.4) rotate(180deg);
        filter: drop-shadow(0 0 25px #00ff00) brightness(1.5);
        color: #00ff00 !important;
    }

    100% {
        transform: scale(1) rotate(360deg);
        filter: drop-shadow(0 0 0px #00ff00);
    }
}

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

/* =================================================================== */
/*      BOTÓN FLOTANTE DE PUBLICAR (FAB) - ESTILO X/TWITTER
/* =================================================================== */

#fab-publish {
    position: fixed;
    bottom: 90px;
    /* Encima de la barra de navegación */
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;

    /* Color de Marca (Amarillo Makumoto) */
    background: var(--color-primary);
    color: #000;

    border: none;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    z-index: 200;
    /* Encima del feed, debajo de modales */

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* Animación de entrada */
    animation: popInFAB 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.2s, background 0.2s;
}

#fab-publish i {
    font-size: 1.5rem;
    pointer-events: none;
}

#fab-publish:active {
    transform: scale(0.9);
    background: #e6c200;
}

@keyframes popInFAB {
    from {
        transform: scale(0) rotate(-90deg);
    }

    to {
        transform: scale(1) rotate(0deg);
    }
}

/* OCULTAR FAB EN ESCRITORIO (Ya tienen el botón grande lateral) */
@media (min-width: 1024px) {
    #fab-publish {
        display: none !important;
    }
}

/* AJUSTE PARA PANTALLAS PEQUEÑAS (BARRA INFERIOR DE 6 ITEMS) */
/* Aseguramos que los 6 iconos quepan sin apretarse demasiado */
@media (max-width: 360px) {
    .bottom-nav-btn {
        width: 35px !important;
    }

    .bottom-nav-btn i {
        font-size: 1.2rem !important;
    }
}

/* =================================================================== */
/*      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: flex-start;
        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;
    /* Oculto por defecto */
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
}

/* REGLA DE VISIBILIDAD DE ORO */
#my-journey-sheet-overlay.show {
    display: flex !important;
    /* Lyra usa Flex */
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#page-profile.active {
    display: block !important;
    /* Perfil usa Block */
    opacity: 1 !important;
    visibility: visible !important;
}


/* 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) */
    /* 1. Estilo Base (Dashboard): Fondo Difuminado */
    #ghost-nav-top {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 2147483647 !important;
        background: rgba(0, 0, 0, 0.85) !important;
        /* FONDO DIFUMINADO */
        backdrop-filter: blur(10px) !important;
        /* BLUR */
        visibility: visible !important;
        border: none !important;
    }

    /* 2. Excepción TV Mode: Transparente para que se vea el video */
    body.tv-mode-active #ghost-nav-top {
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* B. RESTAURAR BARRA INFERIOR (FLEX) */
    /* 1. Estilo Base (Dashboard): Fondo Difuminado */
    .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.9) !important;
        /* FONDO DIFUMINADO OSCURO */
        backdrop-filter: blur(10px) !important;
        border-top: 1px solid #333 !important;
        visibility: visible !important;
    }

    /* 2. Excepción TV Mode: Transparente y sin bordes */
    body.tv-mode-active .bottom-nav {
        background: transparent !important;
        backdrop-filter: none !important;
        border-top: none !important;
        box-shadow: none !important;
        transform: none !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% (FULL SCREEN REAL - SIN RAYA NEGRA) */

    /* 1. EL OVERLAY PADRE: Forzamos coordenadas absolutas al píxel 0 */
    body.tv-mode-active #tv-feed-overlay,
    body.tv-mode-active .tv-overlay-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        /* Altura dinámica real */
        margin: 0 !important;
        padding: 0 !important;
        background: #000 !important;
        z-index: 50 !important;
        /* Debajo de las barras (que tienen z-index más alto) */
        overflow: hidden !important;
    }

    /* 2. EL CONTENEDOR DE SCROLL: Sin márgenes */
    body.tv-mode-active #tv-scroll-container {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-y: scroll !important;
        scroll-snap-type: y mandatory !important;
    }

    /* 3. LA TARJETA DE VIDEO: Sin bordes ni espacios */
    body.tv-mode-active .feed-card.tv-mode {
        position: relative !important;
        width: 100% !important;
        height: 100dvh !important;
        /* Llenar pantalla exacta */
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        background: #000 !important;
    }

    /* 4. EL VIDEO: Forzar COVER para eliminar cualquier franja si el ratio no coincide */
    body.tv-mode-active video,
    body.tv-mode-active .tweet-media-wrapper,
    body.tv-mode-active .card-media-wrapper {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* ESTO MATA LAS BARRAS NEGRAS INTERNAS */
        object-position: center !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* 5. APAGAR CONTENEDORES VIEJOS (Para que no empujen nada) */
    body.tv-mode-active .dashboard-feed-layout,
    body.tv-mode-active main.app-container {
        padding: 0 !important;
        margin: 0 !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;
    }

    

    /* --- ANIMACIÓN: PULSO AMARILLO MAKUMOTO --- */
    @keyframes celestial-pulse {
        0% {
            box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
            border-color: rgba(255, 215, 0, 0.8);
        }

        50% {
            box-shadow: 0 0 20px rgba(255, 215, 0, 1);
            /* BRILLO INTENSO */
            border-color: #FFD700;
            /* ORO PURO */
        }

        100% {
            box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
            border-color: rgba(255, 215, 0, 0.8);
        }
    }

    /* APLICAR AL BOTÓN DE PERFIL */
    #top-btn-profile {
        border: 2px solid #FFD700 !important;
        /* BORDE FORZADO */
        animation: celestial-pulse 3s infinite ease-in-out !important;
    }

    /* AJUSTE PARA PANTALLAS PEQUEÑAS (BARRA INFERIOR DE 6 ITEMS) */
    /* Aseguramos que los 6 iconos quepan sin apretarse demasiado */
    @media (max-width: 360px) {
        .bottom-nav-btn {
            width: 35px !important;
        }

        .bottom-nav-btn i {
            font-size: 1.2rem !important;
        }
    }

    /* =================================================================== */
    /*      BOTÓN LYRA (IMAGEN ANIMADA)
/* =================================================================== */

    /* Contenedor ajustado */
    .lyra-btn-container {
        overflow: visible !important;
        /* Permitir que el brillo salga */
    }

    /* La imagen de Lyra */
    .lyra-icon-img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #00f3ff;
        /* Borde Cyan Neón */

        /* ANIMACIÓN "DÁNDOLE MOVIMIENTO" (Respiración + Brillo) */
        animation: lyra-alive 3s infinite ease-in-out;
    }

    @keyframes lyra-alive {
        0% {
            transform: scale(1);
            box-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
        }

        50% {
            transform: scale(1.15);
            /* Crece sutilmente */
            box-shadow: 0 0 15px rgba(0, 243, 255, 0.9), 0 0 30px rgba(0, 243, 255, 0.4);
            /* Destello */
            border-color: #fff;
            /* Borde brilla blanco */
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
        }
    }

    /* =================================================================== */
    /*      FIX: MODO TV INMERSIVO (BARRAS INTELIGENTES)
/* =================================================================== */

    /* 1. ESTADO BASE: Barras Visibles (Flotantes sobre el video) */
    body.tv-mode-active #ghost-nav-top,
    body.tv-mode-active .bottom-nav {
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 2147483647 !important;
        /* Encima del video */
        transition: opacity 0.3s ease, transform 0.3s ease;
        /* Restaurar visibilidad (Grid en Top Móvil, Flex en Bottom Móvil) */
        visibility: visible !important;
    }

    /* Forzar Grid/Flex en Móvil específicamente (Parche para anular display:none previos) */
    @media (max-width: 1023px) {
        body.tv-mode-active #ghost-nav-top {
            display: grid !important;
        }

        body.tv-mode-active .bottom-nav {
            display: flex !important;
        }
    }

    /* 2. ESTADO SCROLLING: Se ocultan suavemente cuando JS añade la clase */
    body.tv-mode-active.tv-interface-hidden #ghost-nav-top {
        opacity: 0 !important;
        transform: translateY(-100%);
        /* Se va hacia arriba */
        pointer-events: none !important;
    }

    body.tv-mode-active.tv-interface-hidden .bottom-nav {
        opacity: 0 !important;
        transform: translateY(100%);
        /* Se va hacia abajo */
        pointer-events: none !important;
    }

    /* 3. El botón FAB (Lápiz flotante) sí lo mantenemos oculto siempre en TV */
    body.tv-mode-active #fab-publish {
        display: none !important;
    }

    /* Eliminar padding del contenedor principal para que el video suba */
    body.tv-mode-active .dashboard-feed-layout,
    body.tv-mode-active main.app-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
    /* SOLUCIÓN FINAL: MATAR LA ESTRELLA Y DEJAR SOLO EL INVERTIDO */
    /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

    /* 1. ELIMINAR LOS TRIÁNGULOS EXTRA (ESTO BORRA LA ESTRELLA) */
    html body .bottom-nav #btn-gamer-center .gamer-triangle::before,
    html body .bottom-nav #btn-gamer-center .gamer-triangle::after {
        content: none !important;
        display: none !important;
        background: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* 2. EL BOTÓN PADRE (ANCHO CONTROLADO: 60px) */
    html body .bottom-nav #btn-gamer-center {
        width: 60px !important;
        min-width: 60px !important;
        flex: 0 0 60px !important;
        max-width: 60px !important;

        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

   /* COLOR: BLANCO PURO */
        background: #ffffff !important;
        
        /* BORDE ROJO BRILLANTE Y HAZ DE LUZ BLANCO (VÍA FILTROS) */
        filter: drop-shadow(0 0 5px #ff0000) drop-shadow(0 0 2px #ff0000) !important;

        /* FORMA: SOLO PICO HACIA ABAJO */
        clip-path: polygon(0 0, 100% 0, 50% 100%) !important;

        /* Posición */
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        padding-top: 3px !important;

        /* ANIMACIÓN: HAZ DE LUZ RECORRIENDO EL BORDE */
        animation: border-beam-red 1.5s infinite linear !important;
        
        opacity: 1 !important;
        position: static !important;
    }

    /* DEFINICIÓN DE ANIMACIÓN: HAZ RECORRIENDO EL BORDE */
    @keyframes border-beam-red {
        0%   { filter: drop-shadow(-5px -2px 4px #ffffff) drop-shadow(0 0 5px #ff0000); }
        33%  { filter: drop-shadow(5px -2px 4px #ffffff) drop-shadow(0 0 5px #ff0000); }
        66%  { filter: drop-shadow(0 5px 4px #ffffff) drop-shadow(0 0 5px #ff0000); }
        100% { filter: drop-shadow(-5px -2px 4px #ffffff) drop-shadow(0 0 5px #ff0000); }
    }

    /* ESTADO ACTIVO: ROJO TOTAL AL TOCAR */
    html body .bottom-nav #btn-gamer-center:active .gamer-triangle {
        background: #ff0000 !important;
        filter: drop-shadow(0 0 15px #ff0000);
        transform: scale(0.95);
        animation: none !important;
    }

    /* 4. LA LETRA P */
    html body .bottom-nav #btn-gamer-center .triangle-text {
        font-size: 0.9rem !important;
        font-weight: 900 !important;
        margin: 0 !important;
        line-height: 1 !important;
        
        /* COLOR BASE: ROJO */
        color: #ff0000 !important;
        
        /* ANIMACIÓN: DESTELLO BLANCO CEGADOR */
        animation: p-flash-white 2.5s infinite !important;
        
        z-index: 10 !important;
    }

    /* EL EFECTO DE DESTELLO BLANCO EN LA P */
    @keyframes p-flash-white {
        0%, 85% { color: #ff0000; text-shadow: 0 0 2px rgba(255,0,0,0.5); }
        90% { color: #ffffff; text-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff; } /* DESTELLO EXTREMO */
        100% { color: #ff0000; text-shadow: 0 0 2px rgba(255,0,0,0.5); }
    }

    /* 5. VECINOS */
    html body .bottom-nav .bottom-nav-btn:not(#btn-gamer-center) {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* =================================================================== */
    /*      2. GHOST NAV TOP (CORREGIDO: 5 COLUMNAS + BLANCO FANTASMA)
/* =================================================================== */

    #ghost-nav-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        height: 60px;
        z-index: 2147483647 !important;
        /* MÁXIMA PRIORIDAD */

        /* CAMBIO A GRID DE 5 COLUMNAS EXACTAS */
        display: grid;
        grid-template-columns: repeat(5, 1fr);

        /* CENTRADO MATEMÁTICO */
        align-items: center;
        justify-items: center;
        justify-content: center;

        /* Cero Padding lateral para usar el 100% del ancho real */
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        width: 100%;

        /* FONDO FEED: Ultra Fantasma */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        border: none !important;

        padding-top: calc(env(safe-area-inset-top) + 5px);
        padding-bottom: 5px;

        transition: transform 0.2s ease-out, opacity 0.2s ease-out;
        will-change: transform, opacity;
        pointer-events: none;
    }

    /* FIX: FORZAR DESAPARICIÓN SUPERIOR */
    #ghost-nav-top.nav-hidden {
        transform: translateY(-120%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* --- ESTILO DE LOS ICONOS (GHOST LINKS) --- */
    .ghost-link {
        pointer-events: auto;
        background: transparent;
        border: none;
        font-size: 1.1rem;
        cursor: pointer;
        padding: 10px;

        /* Ocupar toda la celda de la grid para centrar */
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- CORRECCIÓN DE COLOR: BLANCO FANTASMA UNIFICADO --- */

    /* 1. PERFIL: Centrado y Borde Blanco Sutil */
    .ghost-link[data-action="open-own-profile"],
    #top-btn-profile {
        margin: 0 auto !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        /* Borde sutil blanco */
        box-shadow: none !important;
        animation: none !important;
    }

    /* 2. TODOS LOS ICONOS: Blanco Transparente + Glow */
    .ghost-link i {
        color: rgba(255, 255, 255, 0.75) !important;
        /* Blanco Fantasma (75%) */
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) !important;
        /* Resplandor */
        text-shadow: none !important;
        transition: transform 0.2s ease, color 0.2s ease;

        /* Asegurar que no hereden colores viejos */
        background: none !important;
        -webkit-text-fill-color: initial !important;
    }

    /* 3. AL TOCAR: Blanco Puro */
    .ghost-link:active i,
    .ghost-link:hover i {
        color: #ffffff !important;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) !important;
        transform: scale(1.1);
    }

    /* =================================================================== */
    /*      2. GHOST NAV TOP (OPCIÓN NUCLEAR: PERFIL FULL COLOR)
/* =================================================================== */

    #ghost-nav-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        height: 60px;
        z-index: 2147483647 !important;

        /* --- GRID MAESTRA DEFINITIVA --- */
        display: grid !important;

        /* DISTRIBUCIÓN MATEMÁTICA PARA AGRUPAR EN LOS EXTREMOS:
       15%: Perfil
       13%: Tienda (Columna estrecha)
       44%: LOGO (Columna MUY ancha para empujar a los lados)
       13%: Mundial (Columna estrecha)
       15%: Buscar
    */
        grid-template-columns: 15% 13% 44% 13% 15% !important;

        /* Alineación Vertical */
        align-items: center !important;
        justify-items: center !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        padding-top: calc(env(safe-area-inset-top) + 5px) !important;
        padding-bottom: 5px !important;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        border: none !important;

        pointer-events: none;
    }

    /* --- ALINEACIÓN QUIRÚRGICA DE ICONOS --- */

    /* 2. TIENDA: Pegada a la Izquierda (Cerca del Perfil, lejos del Logo) */
    #ghost-nav-top> :nth-child(2) {
        justify-self: start !important;
        padding-left: 5px !important;
    }

    /* 3. LOGO: Centrado Absoluto e Intocable */
    #ghost-nav-top> :nth-child(3) {
        justify-self: center !important;
        text-align: center !important;
        width: 100%;
    }

    /* 4. MUNDIAL: Pegado a la Derecha (Cerca de Buscar, lejos del Logo) */
    #ghost-nav-top> :nth-child(4) {
        justify-self: end !important;
        padding-right: 5px !important;
        /* Lo acerca físicamente a la lupa */
    }

    #ghost-nav-top.nav-hidden {
        transform: translateY(-120%) !important;
        opacity: 0 !important;
    }

    /* --- MARCA CENTRAL (MAKUMOTO®) --- */
    .nav-brand-center {
        font-family: 'Orbitron', sans-serif;
        /* Fuente Tech/Futurista */
        font-weight: 900;
        font-size: 0.95rem;
        /* Tamaño calibrado para no romper la línea */
        letter-spacing: 1px;
        text-transform: uppercase;

        /* CENTRADO */
        width: 100%;
        display: flex;
        align-items: flex-start;
        /* Para que la ® quede arriba */
        justify-content: center;

        /* EFECTO DESTELLO (SHINE) */
        background: linear-gradient(to right, #bfbfbf 0%, #ffffff 50%, #bfbfbf 100%);
        background-size: 200% auto;
        color: #fff;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        animation: brand-shine 3s linear infinite;
        pointer-events: auto;
        /* Por si quieres hacerlo clickeable después */
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        /* Resplandor suave */
    }

    /* LA MARCA REGISTRADA ® */
    .tm-mark {
        font-size: 0.5em;
        margin-left: 2px;
        margin-top: 2px;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        /* Que la R sea blanca sólida */
        text-shadow: none;
    }

    @keyframes brand-shine {
        to {
            background-position: 200% center;
        }
    }

    /* --- ICONOS GENERALES --- */
    .ghost-link {
        pointer-events: auto;
        background: transparent;
        border: none;
        font-size: 1.25rem;
        cursor: pointer;
        width: 100%;
        height: 100%;
        padding: 0;
        display: flex !important;
        align-items: center;
        justify-content: center !important;
    }

    /* --- PERFIL: AISLAMIENTO TOTAL --- */
    /* --- ANIMACIÓN: REACTOR NUCLEAR (GOLPE DE LUZ) --- */
    @keyframes tech-pulse {
        0% {
            border-color: rgba(0, 255, 255, 0.3);
            /* Anillo apagado */
            box-shadow: 0 0 5px rgba(0, 255, 255, 0.1);
        }

        50% {
            border-color: #00FFFF;
            /* Anillo ENCENDIDO */
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.4);
            /* Resplandor fuerte */
        }

        100% {
            border-color: rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 5px rgba(0, 255, 255, 0.1);
        }
    }

    /* --- PERFIL: CENTRO DE MANDO --- */
    #top-btn-profile,
    .ghost-link[data-action="open-own-profile"] {
        position: relative !important;

        /* TAMAÑO TOTAL */
        width: 46px !important;
        height: 46px !important;
        margin: 0 auto !important;

        /* AQUÍ ESTÁ EL TRUCO DEL DOBLE ANILLO: */
        padding: 3px !important;
        /* Espacio negro entre foto y anillo */
        background-color: #000 !important;
        background-clip: content-box !important;
        /* La foto respeta el padding */

        /* EL ANILLO EXTERNO */
        border: 2px solid #00FFFF !important;
        border-radius: 50% !important;

        /* ACTIVAR REACTOR */
        animation: tech-pulse 2s infinite ease-in-out !important;

        /* Permitir que el punto salga */
        overflow: visible !important;
        z-index: 500 !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        filter: none !important;
    }

    /* EL SATÉLITE (PUNTO CYAN) - ARRIBA DERECHA */
    #top-btn-profile::after,
    .ghost-link[data-action="open-own-profile"]::after {
        content: '' !important;
        position: absolute !important;

        /* Coordenadas */
        top: -2px !important;
        right: -2px !important;

        width: 12px !important;
        height: 12px !important;
        background: #00FFFF !important;
        border: 2px solid #000 !important;
        border-radius: 50% !important;
        z-index: 502 !important;
        box-shadow: 0 0 8px #00FFFF !important;
        display: block !important;
    }

    /* LA IMAGEN DENTRO */
    #top-btn-profile img,
    .ghost-link[data-action="open-own-profile"] img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;

        /* Limpieza */
        opacity: 1 !important;
        filter: none !important;
    }

    /* OCULTAR EL ICONO DE FONTAWESOME */
    #top-btn-profile i,
    .ghost-link[data-action="open-own-profile"] i {
        display: none !important;
    }

    /* --- RESTO DE ICONOS (GRIS FANTASMA) --- */
    .ghost-link:not([data-action="open-own-profile"]) i {
        /* CAMBIO: De Blanco a Gris Transparente */
        color: rgba(255, 255, 255, 0.5) !important;

        /* Sombra negra para contraste */
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
        transition: color 0.2s ease, transform 0.2s ease;
        opacity: 1 !important;
    }

    /* Hover: Se iluminan a blanco */
    .ghost-link:not([data-action="open-own-profile"]):active i {
        color: #ffffff !important;
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) !important;
    }

    /* --- EFECTO REBOTE DEL BALÓN --- */
    @keyframes ball-bounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-5px);
        }

        /* Salto hacia arriba */
    }

    /* Aplicar animación solo al icono de fútbol */
    .ghost-link i.fa-futbol {
        animation: ball-bounce 1s infinite ease-in-out !important;
        color: rgba(255, 255, 255, 0.6) !important;
        /* Un poco más visible que el resto */
    }

    /* --- ICONO LYRA: THE CORE (Animated Text) --- */

    .lyra-btn-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding-top: 4px;
    }

    /* El Icono (Anillo + Núcleo) */
    .lyra-core-icon {
        position: relative;
        width: 20px;
        height: 20px;
        margin-bottom: 3px;
    }

    /* Anillo Exterior */
    .core-outer {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px dashed #ab71ed;
        border-radius: 50%;
        animation: lyraSpin 10s linear infinite;
        opacity: 0.8;
    }

    /* Núcleo Interior */
    .core-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 0 8px #ab71ed, 0 0 15px #ab71ed;
        animation: lyraBreathe 2.5s ease-in-out infinite;
    }

    /* --- TEXTO CON DESTELLO (SHINE) --- */
    .lyra-label {
        font-size: 0.5rem;
        font-weight: 900;
        letter-spacing: 1px;
        font-family: 'Orbitron', sans-serif;
        line-height: 1;

        /* El truco del gradiente */
        background: linear-gradient(90deg,
                #ab71ed 0%,
                #ab71ed 40%,
                #ffffff 50%,
                /* El destello blanco */
                #ab71ed 60%,
                #ab71ed 100%);
        background-size: 200% auto;
        /* Hacemos el fondo doble de ancho para moverlo */

        /* Recortar el fondo a la forma del texto */
        color: #ab71ed;
        /* Fallback */
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        /* Animación infinita */
        animation: textShine 3s linear infinite;
    }

    /* --- ANIMACIONES --- */
    @keyframes lyraSpin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes lyraBreathe {

        0%,
        100% {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 0.7;
        }

        50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 1;
        }
    }

    /* Animación del destello de letra en letra */
    @keyframes textShine {
        0% {
            background-position: -200% center;
        }

        100% {
            background-position: 200% center;
        }
    }

    /* --- ESTADO ACTIVO --- */
    .bottom-nav-btn.active .core-outer {
        border-color: #fff;
        opacity: 1;
    }

    .bottom-nav-btn.active .core-inner {
        background: #FFD700;
        /* Núcleo dorado */
        box-shadow: 0 0 10px #FFD700;
    }

    /* Cuando está activo, el destello cambia a dorado */
    .bottom-nav-btn.active .lyra-label {
        background: linear-gradient(90deg,
                #ffffff 0%,
                #ffffff 40%,
                #FFD700 50%,
                /* Destello Dorado */
                #ffffff 60%,
                #ffffff 100%);
        background-size: 200% auto;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textShine 2s linear infinite;
        /* Más rápido al estar activo */
    }

    /* --- CORRECCIÓN DE CLICS --- */
    .lyra-btn-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding-top: 4px;

        /* ESTA LÍNEA ES LA MAGIA QUE ARREGLA EL BOTÓN: */
        pointer-events: none;
    }

    /* --- ICONO LYRA: TECH BLOCKS (FIXED CLICK) --- */
    position: relative;
    width: 24px;
    height: 24px;

    .lyra-tech-icon {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding-bottom: 2px;
        padding-left: 4px;

        /* ESTA LÍNEA ES VITAL: Permite que el clic "atraviese" el dibujo y llegue al botón */
        pointer-events: none;
    }

    /* El resto de las clases del modelo 4 se quedan igual... */
    .l-block-v {
        width: 6px;
        height: 16px;
        background: linear-gradient(180deg, #ab71ed, #8e44ad);
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(171, 113, 237, 0.5);
        animation: lyraFloatV 3s ease-in-out infinite;
        z-index: 2;
    }

    .l-block-h {
        width: 10px;
        height: 6px;
        background: #ffffff;
    }

    .l-block-v {
        width: 6px;
        height: 16px;
        border-radius: 4px;
        margin-left: -2px;
        margin-bottom: 0px;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
        animation: lyraFloatH 3s ease-in-out infinite;
        animation-delay: 0.5s;
    }

    @keyframes lyraFloatV {

        0%,
        100% {
            transform: translateY(0);
            box-shadow: 0 0 5px rgba(171, 113, 237, 0.4);
        }

        50% {
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(171, 113, 237, 0.9);
        }
    }

    @keyframes lyraFloatH {

        0%,
        100% {
            transform: translateX(0);
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        }

        50% {
            transform: translateX(1px);
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
        }
    }

    /* Estados activos */
    .bottom-nav-btn.active .l-block-v {
        background: #fff;
        box-shadow: 0 0 15px #ab71ed;
    }

    .bottom-nav-btn.active .l-block-h {
        background: #FFD700;
        box-shadow: 0 0 15px #FFD700;
    }

    /* ... (Código existente) ... */

    /* =================================================================== */
    /*      NUEVOS ESTILOS LYRA 2.0 & PLAN HUB
/* =================================================================== */

    /* 1. ANIMACIÓN ESPECTACULAR LYRA */
    .lyra-super-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 2;
        border: 2px solid #fff;
        box-shadow: 0 0 20px rgba(171, 113, 237, 0.6);
        animation: lyraPulse 4s infinite ease-in-out;
    }

    .lyra-super-avatar::after {
        content: '';
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(171, 113, 237, 0.4) 0%, transparent 70%);
        z-index: -1;
        animation: lyraAura 2s infinite alternate;
    }

    @keyframes lyraPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 20px rgba(171, 113, 237, 0.6);
            border-color: #fff;
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 0 50px rgba(171, 113, 237, 1);
            border-color: #d1a3ff;
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 20px rgba(171, 113, 237, 0.6);
            border-color: #fff;
        }
    }

    @keyframes lyraAura {
        from {
            opacity: 0.5;
            transform: scale(1);
        }

        to {
            opacity: 1;
            transform: scale(1.2);
        }
    }

    /* 2. TOGGLES (SWITCHES) DE CONFIGURACIÓN */
    .config-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 85%;
        max-width: 320px;
        background: #111;
        padding: 10px 15px;
        border-radius: 12px;
        border: 1px solid #333;
        margin-bottom: 10px;
    }

    .config-label {
        font-size: 0.8rem;
        color: #aaa;
        font-weight: 600;
        text-transform: uppercase;
    }

    .config-toggle-group {
        display: flex;
        background: #000;
        border-radius: 20px;
        padding: 2px;
        border: 1px solid #333;
    }

    .c-toggle-btn {
        padding: 5px 15px;
        border-radius: 18px;
        border: none;
        background: transparent;
        color: #555;
        font-size: 0.7rem;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s;
    }

    .c-toggle-btn.active {
        background: #ab71ed;
        color: #fff;
        box-shadow: 0 0 10px rgba(171, 113, 237, 0.4);
    }

    /* 3. CALENDARIO 30 DÍAS */
    .plan-hub-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        padding: 15px;
        max-height: 400px;
        overflow-y: auto;
    }

    .day-cell {
        aspect-ratio: 1;
        background: #1a1a1a;
        border: 1px solid #333;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s;
    }

    .day-cell:hover {
        border-color: #ab71ed;
        background: #222;
    }

    .day-cell.completed {
        border-color: #2ecc71;
        color: #2ecc71;
    }

    .day-num {
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
    }

    .day-label {
        font-size: 0.5rem;
        color: #888;
        text-transform: uppercase;
    }

    /* 4. MAGAZINE NUEVO */
    .mag-modern-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.95);
        z-index: 2147483647;
        display: flex;
        flex-direction: column;
    }

    .mag-header {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        border-bottom: 1px solid #333;
        background: #000;
    }

    .mag-content {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
    }

    /* =================================================================== */
    /*      NUEVO TIPS HUB (CENTRO DE INTELIGENCIA)
/* =================================================================== */

    .tips-fullscreen {
        position: fixed;
        inset: 0;
        background: #000;
        z-index: 2147483650;
        display: flex;
        flex-direction: column;
    }

    /* Header Transparente */
    .tips-header-pro {
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(20, 20, 20, 0.9);
        border-bottom: 1px solid #333;
        backdrop-filter: blur(10px);
    }

    /* Banner de Alerta (Emergencia) */
    .alert-banner {
        background: linear-gradient(90deg, #8B0000 0%, #ff4444 100%);
        color: #fff;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        animation: alertPulse 3s infinite;
        font-family: 'Orbitron', sans-serif;
        font-size: 0.8rem;
    }

    @keyframes alertPulse {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.8;
        }

        100% {
            opacity: 1;
        }
    }

    /* Navegación Interna */
    .tips-nav {
        display: flex;
        padding: 0 10px;
        background: #111;
        border-bottom: 1px solid #222;
    }

    .t-nav-btn {
        flex: 1;
        padding: 15px;
        background: none;
        border: none;
        color: #666;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        cursor: pointer;
        transition: 0.3s;
        border-bottom: 3px solid transparent;
    }

    .t-nav-btn.active {
        color: #fff;
        border-bottom-color: #00f3ff;
    }

    /* Contenedor Scroll */
    .tips-scroll-area {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
    }

    /* Tarjetas de Noticias (Live Feed) */
    .news-card {
        background: #1a1a1a;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 15px;
        border: 1px solid #333;
        position: relative;
    }

    .news-img {
        height: 140px;
        background-size: cover;
        background-position: center;
    }

    .news-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #FFD700;
        color: #000;
        padding: 4px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        border-radius: 4px;
    }

    .news-content {
        padding: 15px;
    }

    .news-title {
        color: #fff;
        font-size: 1rem;
        margin: 0 0 5px 0;
        line-height: 1.3;
    }

    .news-meta {
        color: #888;
        font-size: 0.7rem;
        display: flex;
        justify-content: space-between;
    }

    /* Cuestionario Minimalista */
    .quiz-step {
        display: none;
        text-align: center;
        padding-top: 20px;
        animation: fadeIn 0.4s;
    }

    .quiz-step.active {
        display: block;
    }

    .quiz-option {
        display: block;
        width: 100%;
        padding: 15px;
        margin-bottom: 10px;
        background: #222;
        border: 1px solid #444;
        border-radius: 10px;
        color: #fff;
        text-align: left;
        cursor: pointer;
        transition: 0.2s;
    }

    .quiz-option:hover,
    .quiz-option.selected {
        background: #333;
        border-color: #00f3ff;
    }

    .quiz-progress {
        height: 4px;
        background: #222;
        width: 100%;
        margin-bottom: 20px;
    }

    .quiz-bar {
        height: 100%;
        background: #00f3ff;
        width: 0%;
        transition: width 0.3s;
    }

    /* Tarjetas "Para Ti" */
    .advice-card {
        background: linear-gradient(145deg, #151515, #0a0a0a);
        padding: 20px;
        border-radius: 16px;
        border-left: 4px solid #2ecc71;
        margin-bottom: 15px;
    }

/* ====================================================== */
/*  CONTROL MAESTRO DE NAVEGACIÓN (CORREGIDO: SOLO MÓVIL) */
/*  Esto asegura que la orden de mostrarse NUNCA llegue al PC */
/* ====================================================== */

@media screen and (max-width: 1023px) {

    /* 1. ESTADO NATURAL: VISIBLE Y ENCIMA DE TODO (SOLO EN MÓVIL) */
    body .bottom-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 9000 !important;
        background: linear-gradient(to top, #000000 10%, rgba(0, 0, 0, 0.95) 100%);
        border-top: 1px solid #333;
        pointer-events: auto !important;
        transform: translateY(0);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

}

/* 2. ESTADO OCULTO FORZADO (GLOBAL) */
/* Esto se mantiene global para poder ocultarla con JS en cualquier dispositivo si hace falta */
body.hide-nav-force .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    height: 0 !important;
    transform: translateY(100%) !important;
}

    /* 3. MODALES QUE NO SON FULL SCREEN (Respetan la barra) */
    /* Solo si NO estamos en modo hide-nav-force */
    body:not(.hide-nav-force) .modal-overlay,
    body:not(.hide-nav-force) .xp-hub-card {
        height: calc(100% - 60px) !important;
        bottom: 60px !important;
    }

    /* 4. MODALES FULL SCREEN (Como el Citar) */
    body.hide-nav-force .modal-overlay {
        height: 100vh !important;
        bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* =================================================================== */
    /*   BLOQUEO TOTAL DE INTERFAZ PARA REPOST/CITAR (SOLUCIÓN DEFINITIVA) */
    /* =================================================================== */
    body.repost-active #ghost-nav-top,
    body.repost-active .bottom-nav,
    body.repost-active #fab-publish {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.repost-active {
        overflow: hidden !important;
        background: #000 !important;
    }

    /* REGLA DE EXTERMINIO DE BARRAS */
    body.modal-repost-open #ghost-nav-top,
    body.modal-repost-open .bottom-nav,
    body.modal-repost-open #fab-publish {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.modal-repost-open {
        overflow: hidden !important;
    }

    /* =================================================================== */
    /*      ANIMACIONES DE SWIPE (NUEVO)
/* =================================================================== */

    /* Animación: Entrar desde la derecha (Swipe Left) */
    @keyframes slideInRight {
        from {
            transform: translateX(20%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Animación: Entrar desde la izquierda (Swipe Right) */
    @keyframes slideInLeft {
        from {
            transform: translateX(-20%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Clases utilitarias activadas por JS */
    .slide-in-right .page.active {
        animation: slideInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .slide-in-left .page.active {
        animation: slideInLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    /* Optimización para móviles */
    main.app-container {
        will-change: transform, opacity;
        /* Prepara a la GPU */
    }

    /* =================================================================== */
    /*      NAVEGACIÓN BOTANICAL
/* =================================================================== */

    /* Barra Inferior (Blanco Puro con tope verde) */
    body.theme-pastel .bottom-nav {
        background: rgba(255, 255, 255, 0.98) !important;
        border-top: 2px solid #A5D6A7 !important;
        box-shadow: 0 -5px 15px rgba(27, 94, 32, 0.05);
    }

    /* Iconos inactivos (Verde Oliva) */background: #E8F5E9 !important;
    body.theme-pastel .bottom-nav-btn i {
        color: #7CB342 !important;
        filter: none !important;
    }

    /* Iconos ACTIVOS (Rose Gold - Destacan sobre el verde) */
    body.theme-pastel .bottom-nav-btn.active i {
        color: #D81B60 !important;
        transform: scale(1.15);
    }

    /* Barra Superior */
    body.theme-pastel #ghost-nav-top {
        background: rgba(232, 245, 233, 0.95) !important;
        /* Menta semitransparente */
        border-bottom: 1px solid #A5D6A7 !important;
    }

    body.theme-pastel .ghost-link i {
        color: #2E7D32 !important;
    }

    /* =================================================================== */
    /*      CORRECCIONES FINALES TEMA PASTEL (BOTANICAL)
/* =================================================================== */

    /* 1. BARRA INFERIOR (Ahora sí será Blanca/Menta) */
    body.theme-pastel {
        --nav-bg: rgba(255, 255, 255, 0.98);
        /* Esto alimenta al index.html */
    }

    body.theme-pastel .bottom-nav {
        border-top: 2px solid #A5D6A7 !important;
        /* Borde Verde Suave */
        box-shadow: 0 -5px 20px rgba(27, 94, 32, 0.1) !important;
    }

    /* 2. EL LOGO MAKUMOTO (Que se vea oscuro y elegante) */
    body.theme-pastel .nav-brand-center {
        /* Gradiente Verde Bosque a Oro Rosado */
        background: linear-gradient(to right, #1B5E20, #D81B60) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        text-shadow: none !important;
        /* Quitamos el brillo blanco que lo esconde */
        font-weight: 900 !important;
    }

    /* La R de marca registrada */
    body.theme-pastel .tm-mark {
        -webkit-text-fill-color: #1B5E20 !important;
        color: #1B5E20 !important;
    }

    /* 3. FONDO ENTRE TARJETAS (Adiós al negro) */
    body.theme-pastel,
    body.theme-pastel main.app-container,
    body.theme-pastel .dashboard-feed-layout {
        background-color: #E8F5E9 !important;
        /* EL VERDE MENTA DE FONDO */
        background: #E8F5E9 !important;
    }

    /* Asegurar que el contenedor del feed no tenga negro */
    body.theme-pastel #page-dashboard {
        background-color: transparent !important;
    }

    /* Triángulo Central en Modo Pastel */
    body.theme-pastel .gamer-triangle {
        /* Gradiente Oro Rosado */
        background: linear-gradient(180deg, #D81B60 0%, #AD1457 100%) !important;
        box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.4) !important;
    }

    /* =================================================================== */
    /*      AJUSTES FINALES UI: BOTANICAL LUXURY (VERSIÓN BLINDADA)
/* =================================================================== */

    /* 1. BOTONES DE NAVEGACIÓN (TODOS VERDES) */
    /* Forzamos que la Casa (#btn-pulso) pierda su color especial y sea verde igual que el resto */
    body.theme-pastel .bottom-nav-btn i,
    body.theme-pastel #btn-pulso i {
        color: #558B2F !important;
        /* Verde Oliva Natural */
        background: transparent !important;
        -webkit-text-fill-color: #558B2F !important;
        /* Forzar relleno verde */
        filter: none !important;
    }

    /* Solo el activo se pone Rose Gold (Opcional, si quieres todos verdes quita esto) */
    body.theme-pastel .bottom-nav-btn.active i {
        color: #D81B60 !important;
        -webkit-text-fill-color: #D81B60 !important;
    }

    /* 2. TRIÁNGULO CENTRAL (La Gema Esmeralda) */
    /* Atacamos por ID y Clase para máxima prioridad */
    body.theme-pastel #btn-gamer-center .gamer-triangle,
    body.theme-pastel .gamer-triangle {
        /* Degradado Rico: De Hoja a Bosque - CON !important */
        background: linear-gradient(180deg, #66BB6A 0%, #2E7D32 100%) !important;
        background-color: #2E7D32 !important;
        /* Fallback */
        box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.4) !important;
        border: none !important;
        /* Quitar bordes rojos si existían */
    }

    /* La Letra P */
    body.theme-pastel .triangle-text {
        color: #FFFFFF !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    /* 3. BOTÓN FLOTANTE (FAB): NEGRO CON BORDE BLANCO */
    body.theme-pastel #fab-publish {
        /* Negro Puro */
        background: #000000 !important;
        color: #FFFFFF !important;

        /* EL BORDE BLANCO SOLICITADO */
        border: 2px solid #FFFFFF !important;

        /* Sombra fuerte para separarlo del fondo */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    }

    /* Icono de la pluma dentro del botón */
    body.theme-pastel #fab-publish i {
        color: #FFFFFF !important;
    }

    /* =================================================================== */
    /*      FIX FINAL DE BARRAS (CONECTADO AL INDEX.HTML)
/* =================================================================== */

    body.theme-pastel {
        /* ESTA VARIABLE CONTROLA EL COLOR EN EL INDEX.HTML */
        --bottom-nav-bg: rgba(200, 230, 201, 0.98);
        /* Verde Cristal Bonito */
    }

    /* 1. BARRA SUPERIOR (CAMUFLAJE TOTAL - SIN LÍNEAS) */
body.theme-pastel #ghost-nav-top {
    /* Mismo color exacto del fondo */
    background: #E8F5E9 !important;
    background-color: #E8F5E9 !important;
    
    /* ELIMINAR CUALQUIER LÍNEA O SOMBRA */
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

    /* 2. BARRA INFERIOR (VERDE CRISTAL - FIX LÍNEA NEGRA) */
/* Usamos 'html body' para tener máxima autoridad sobre el index.html */
html body.theme-pastel .bottom-nav {
    /* El Verde Bonito */
    background: rgba(200, 230, 201, 0.98) !important; 
    
    /* EL TRUCO MAESTRO: Pintamos la línea de BLANCO */
    /* Esto tapa la línea negra del index.html */
    border-top: 1px solid #FFFFFF !important; 
    
    /* Sombra verde suave (No negra) */
    box-shadow: 0 -4px 15px rgba(165, 214, 167, 0.3) !important;
    
    /* Seguridad extra */
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    outline: none !important;
}

    /* 3. TRIÁNGULO (NEGRO) */
    body.theme-pastel .gamer-triangle {
        background: #000000 !important;
        background-image: none !important;
        border: none !important;
    }

    body.theme-pastel .triangle-text {
        color: #fff !important;
        text-shadow: none !important;
    }

    /* 4. BOTÓN FLOTANTE (BLANCO CON BORDE VERDE) */
    body.theme-pastel #fab-publish {
        background: #FFFFFF !important;
        border: 2px solid #1B5E20 !important;
        color: #1B5E20 !important;
    }

    body.theme-pastel #fab-publish i {
        color: #1B5E20 !important;
        -webkit-text-fill-color: #1B5E20 !important;
    }

    /* =================================================================== */
    /*      ELIMINACIÓN GLOBAL DE LÍNEAS LATERALES (LIMPIEZA)
/* =================================================================== */

    /* Matar la línea dorada/amarilla lateral en retweets y destacados */
    .retweet-neon-card::before,
    .feed-card::before,
    .feed-card.highlighted::before {
        display: none !important;
        content: none !important;
        width: 0 !important;
        border: none !important;
    }

    /* Asegurar que no quede borde izquierdo */
    .retweet-neon-card,
    .feed-card {
        border-left: none !important;
        margin-left: 0 !important;
    }

    /* =================================================================== */
    /*      FIX TRIÁNGULO: NEGRO ABSOLUTO (TEMA PASTEL)
/* =================================================================== */

    body.theme-pastel nav.bottom-nav button#btn-gamer-center div.gamer-triangle,
    body.theme-pastel .gamer-triangle {
        /* 1. MATAR EL DEGRADADO ROJO */
        background-image: none !important;

        /* 2. PONER EL NEGRO */
        background-color: #000000 !important;
        background: #000000 !important;

        /* 3. LIMPIEZA */
        border: none !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;

        /* 4. ASEGURAR FORMA */
        clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
        -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
    }

    /* La letra P en Blanco */
    body.theme-pastel .triangle-text {
        color: #FFFFFF !important;
        text-shadow: none !important;
        font-weight: 900 !important;
    }

    /* =================================================================== */
    /*      LIMPIEZA FINAL: BORDES Y LÍNEAS (TEMA PASTEL)
/* =================================================================== */

    /* Quitar las líneas negras a los lados de la pantalla */
    body.theme-pastel main.app-container,
    body.theme-pastel .dashboard-feed-layout,
    body.theme-pastel #page-dashboard {
        border-left: none !important;
        border-right: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Asegurar que el fondo cubra todo sin líneas */
    body.theme-pastel {
        background-color: #E8F5E9 !important;
    }/* =================================================================== */
/*      FIX LYRA: FUERZA VERDE (RESCATE FINAL)
/* =================================================================== */

/* 1. EL ANILLO QUE GIRA */
body.theme-pastel #btn-lyra .core-outer {
    border-color: #2E7D32 !important; /* Verde Esmeralda */
    opacity: 1 !important; /* Que se vea bien */
}

/* 2. EL PUNTO CENTRAL (NÚCLEO) */
body.theme-pastel #btn-lyra .core-inner {
    background-color: #2E7D32 !important;
    box-shadow: 0 0 8px #2E7D32 !important; /* Brillo verde */
}

/* 3. EL TEXTO "LYRA" */
body.theme-pastel #btn-lyra .lyra-label {
    /* Matar cualquier gradiente morado previo */
    background: none !important;
    background-image: none !important;
    
    /* Color Sólido Verde Oscuro */
    color: #1B5E20 !important;
    -webkit-text-fill-color: #1B5E20 !important;
    
    text-shadow: none !important;
    font-weight: 900 !important;
}

/* 4. ESTADO ACTIVO (Si estás en la página de Lyra) */
body.theme-pastel #btn-lyra.active .lyra-label {
    color: #D81B60 !important; /* Rose Gold si está activo */
    -webkit-text-fill-color: #D81B60 !important;
}
/* =================================================================== */
/*      CONTROL MAESTRO DE NAVEGACIÓN (MÓVIL VS ESCRITORIO)
/* =================================================================== */

/* 1. CONFIGURACIÓN BASE (MÓVIL - TEMA DARK POR DEFECTO) */
.bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    z-index: 2147483647 !important; /* Capa más alta */
    
    /* Estilo Dark Default */
    background: linear-gradient(to top, #000000 10%, rgba(0,0,0,0.95) 100%) !important;
    border-top: 1px solid #333 !important;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
    
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. CONFIGURACIÓN MÓVIL (TEMA PASTEL - OVERRIDE) */
body.theme-pastel .bottom-nav {
    background: rgba(200, 230, 201, 0.98) !important; /* Verde Bonito */
    border-top: 1px solid #FFFFFF !important; /* Línea de luz blanca */
    box-shadow: 0 -5px 20px rgba(27, 94, 32, 0.1) !important;
}

/* 3. EXTERMINIO EN ESCRITORIO (PC/TABLET > 1024px) */
/* Esta regla al final sobrescribe todo lo anterior si la pantalla es grande */
@media screen and (min-width: 1024px) {
    
    /* Ocultar Barra Inferior */
    html body .bottom-nav,
    html body nav.bottom-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -9999 !important;
    }

    /* Ocultar Barra Superior Móvil */
    html body #ghost-nav-top {
        display: none !important;
    }

    /* Ocultar Botón Flotante */
    html body #fab-publish {
        display: none !important;
    }
    
    /* Reajustar márgenes para que no quede hueco */
    html body, 
    html body .app-container, 
    html body .dashboard-feed-layout {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* =================================================================== */
/*      FIX NUCLEAR FINAL: EXTERMINIO DE BARRA EN ESCRITORIO
/*      Esto va al final absoluto para sobrescribir el Control Maestro
/* =================================================================== */

@media screen and (min-width: 1024px) {
    
    /* Usamos 'html body' para ganar especificidad sobre 'body' */
    html body .bottom-nav,
    html body nav.bottom-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        width: 0 !important;
        z-index: -9999 !important;
    }

    /* También aseguramos que el botón flotante (FAB) muera en PC */
    html body #fab-publish {
        display: none !important;
    }

    /* Ajuste de márgenes para que el contenido no deje el hueco de la barra */
    html body .dashboard-feed-layout,
    html body main.app-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* =================================================================== */
/*      FIX FINAL DE VERDAD: ANIQUILACIÓN POR ESPECIFICIDAD
/*      Atacamos con el mismo selector 'body:not' para ganarle.
/* =================================================================== */

@media screen and (min-width: 1024px) {
    
    /* Usamos EXACTAMENTE el mismo selector que la obliga a verse, para sobrescribirlo */
    body:not(.hide-nav-force) .bottom-nav,
    body.logged-in:not(.hide-nav-force) .bottom-nav,
    html body .bottom-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        pointer-events: none !important;
        z-index: -9999 !important;
    }

    /* Aseguramos que el contenido suba y ocupe el hueco */
    html body .dashboard-feed-layout,
    html body main.app-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* =================================================================== */
/*      TIRO DE GRACIA: EXTERMINIO POR ID (GANA SIEMPRE)
/* =================================================================== */

@media screen and (min-width: 1024px) {
    /* Al llamar al ID, ignoramos todas las reglas de clase anteriores */
    #mobile-dock-unique {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        width: 0 !important;
        z-index: -99999 !important;
    }
}
@media screen and (min-width: 1024px) {
    nav.bottom-nav, .bottom-nav {
        display: none !important;
    }
}
/* =================================================================== */
/*      FIX FINAL: ESCRITORIO BOTANICAL (AHORA SIN BLOQUEOS)
/* =================================================================== */

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

    /* 1. FONDOS LATERALES Y CENTRAL (MENTA) */
    /* Usamos html body.theme-pastel para máxima prioridad */
    html body.theme-pastel,
    html body.theme-pastel #desktop-sidebar-left,
    html body.theme-pastel #desktop-sidebar-right,
    html body.theme-pastel main.app-container,
    html body.theme-pastel .dashboard-feed-layout {
        background-color: #E8F5E9 !important; /* Verde Menta Suave */
        background: #E8F5E9 !important;
        border-color: #A5D6A7 !important;     /* Borde Verde */
    }

    /* 2. TARJETAS DE DERECHA Y WIDGETS (BLANCAS) */
    html body.theme-pastel .desktop-card,
    html body.theme-pastel .trends-card,
    html body.theme-pastel .suggestions-card {
        background-color: #FFFFFF !important;
        border: 1px solid #C8E6C9 !important;
    }
    
    /* Textos de las tarjetas */
    html body.theme-pastel .desktop-card h3,
    html body.theme-pastel .trend-title,
    html body.theme-pastel .s-name {
        color: #1B5E20 !important; /* Verde Oscuro */
        border-bottom: 1px solid #E8F5E9 !important;
    }
    
    html body.theme-pastel .trend-meta,
    html body.theme-pastel .trend-count,
    html body.theme-pastel .s-handle {
        color: #558B2F !important; /* Verde Oliva */
    }

    /* 3. BARRA DE BÚSQUEDA */
    html body.theme-pastel .desktop-search-bar {
        background-color: #FFFFFF !important;
        border: 1px solid #A5D6A7 !important;
    }
    html body.theme-pastel .desktop-search-bar input {
        color: #000000 !important;
    }
    html body.theme-pastel .desktop-search-bar i {
        color: #2E7D32 !important;
    }

    /* 4. MENÚ IZQUIERDO */
    html body.theme-pastel .d-nav-btn {
        color: #558B2F !important;
        font-weight: 600 !important;
    }
    /* Hover */
    html body.theme-pastel .d-nav-btn:hover {
        background-color: rgba(46, 125, 50, 0.1) !important;
        color: #1B5E20 !important;
    }
    /* Activo (Inicio) */
    html body.theme-pastel .d-nav-btn.active {
        background-color: #C8E6C9 !important;
        color: #1B5E20 !important;
    }
    html body.theme-pastel .d-nav-btn i {
        color: inherit !important;
    }

    /* 5. BOTÓN BOONEAR GIGANTE */
    html body.theme-pastel .desktop-compose-btn {
        background: #1B5E20 !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 15px rgba(27, 94, 32, 0.3) !important;
    }
    html body.theme-pastel .desktop-compose-btn:hover {
        background: #2E7D32 !important;
    }
    
    /* 6. COMPOSER CENTRAL (INPUT) */
    html body.theme-pastel .desktop-inline-composer {
        background-color: #E8F5E9 !important;
        border-bottom: 1px solid #A5D6A7 !important;
    }
    html body.theme-pastel #inline-compose-text {
        color: #1B5E20 !important;
    }
    html body.theme-pastel #inline-compose-text::placeholder {
        color: #81C784 !important;
    }
    /* Botón pequeño */
    html body.theme-pastel .dic-post-btn {
        background-color: #1B5E20 !important;
        color: #FFFFFF !important;
        opacity: 1 !important;
    }
    /* Iconos */
    html body.theme-pastel .dic-icons-left i {
        color: #2E7D32 !important;
    }
}
/* ================================================================= */
/* FIX ABSOLUTO: TRIÁNGULO BLANCO + BORDE ROJO + P DESTELLANTE       */
/* (ESTE BLOQUE DEBE IR AL FINAL DEL ARCHIVO PARA GANARLE AL VERDE)  */
/* ================================================================= */

/* 1. EL TRIÁNGULO (FONDO BLANCO PURO) */
html body .bottom-nav #btn-gamer-center .gamer-triangle {
    /* MATA CUALQUIER GRADIENTE VERDE PREVIO */
    background-image: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;

    /* BORDE ROJO BRILLANTE (Simulado con filtros para que siga la forma) */
    /* Esto crea el efecto de luz roja alrededor del blanco */
    filter: drop-shadow(0 0 2px #ff0000) drop-shadow(0 0 5px #ff0000) !important;

    /* Forma del Triángulo Invertido */
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;

    /* ANIMACIÓN: HAZ DE LUZ RECORRIENDO EL BORDE */
    animation: beam-cycle-red 1s infinite linear !important;

    /* Ajustes de posición */
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 3px !important;
    opacity: 1 !important;
    
    /* Aseguramos dimensiones */
    width: 180px !important;
    height: 36px !important;
}

/* ANIMACIÓN DEL HAZ ROJO GIRANDO ALREDEDOR */
@keyframes beam-cycle-red {
    0%   { filter: drop-shadow(0 -4px 3px #ff0000) drop-shadow(0 0 5px #ff0000); }
    25%  { filter: drop-shadow(4px 0 3px #ff0000) drop-shadow(0 0 5px #ff0000); }
    50%  { filter: drop-shadow(0 4px 3px #ff0000) drop-shadow(0 0 5px #ff0000); }
    75%  { filter: drop-shadow(-4px 0 3px #ff0000) drop-shadow(0 0 5px #ff0000); }
    100% { filter: drop-shadow(0 -4px 3px #ff0000) drop-shadow(0 0 5px #ff0000); }
}

/* 2. LA LETRA P (ROJA CON DESTELLO BLANCO) */
html body .bottom-nav #btn-gamer-center .triangle-text {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    line-height: 1 !important;

    /* COLOR BASE: ROJO SANGRE */
    color: #ff0000 !important;
    text-shadow: none !important;

    /* ANIMACIÓN: DESTELLO BLANCO */
    animation: text-flash-white 3s infinite ease-in-out !important;
    z-index: 10 !important;
}

/* EFECTO DESTELLO BLANCO EN LA LETRA */
@keyframes text-flash-white {
    0%, 90% {
        color: #ff0000;
        text-shadow: none;
    }
    95% {
        color: #ffffff; /* BLANCO PURO */
        text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff; /* RESPLANDOR */
    }
    100% {
        color: #ff0000;
        text-shadow: none;
    }
}

/* 3. AL TOCAR (FEEDBACK VISUAL) */
/* Se invierte: Fondo Rojo, Letra Blanca */
html body .bottom-nav #btn-gamer-center:active .gamer-triangle {
    transform: scale(0.95);
    background: #ff0000 !important; 
    filter: drop-shadow(0 0 15px #ff0000);
    animation: none !important;
}
html body .bottom-nav #btn-gamer-center:active .triangle-text {
    color: #ffffff !important;
    animation: none !important;
}