/* ===================================
   KOmbo Logo Center Fix
   Centra el logo KOmbo en la parte superior
   =================================== */

/* ===== DESKTOP - LOGO CENTRADO ===== */
@media (min-width: 769px) {
    /* Posicionar el logo KOmbo en el centro superior */
    .kombo-logo,
    .kombo-logo:hover,
    .kombo-logo:active,
    .kombo-logo:focus {
        position: fixed !important;
        top: 25px !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* SIEMPRE centrado */
        right: auto !important;
        z-index: 1000 !important;
        text-decoration: none !important;
        transition: none !important; /* Sin transición */
        cursor: default !important; /* Sin cursor pointer */

        /* Reset de otros estilos */
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Estilo del texto del logo */
    .kombo-text {
        font-family: 'Space Grotesk', -apple-system, sans-serif !important;
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important; /* Color original */
        letter-spacing: 0.05em !important;
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
        white-space: nowrap !important;
        transition: none !important; /* Sin transición */
    }

    /* Base del logo */
    .kombo-base {
        color: var(--text-secondary) !important; /* Color original */
        transition: none !important; /* Sin transición */
        font-weight: 300 !important;
    }

    /* Hover effect - COMPLETAMENTE DESACTIVADO */
    .kombo-logo:hover {
        transform: translateX(-50%) !important; /* Mantener centrado SIEMPRE */
        animation: none !important; /* Detener cualquier animación en hover */
    }

    .kombo-logo:hover .kombo-text {
        transform: none !important; /* Sin movimiento */
        color: var(--text-secondary) !important; /* Mantener color original */
        text-shadow: none !important; /* Sin sombra */
    }

    .kombo-logo:hover .kombo-base {
        transform: none !important; /* Sin movimiento */
        color: var(--text-secondary) !important; /* Mantener color original */
    }

    /* Animación de entrada */
    @keyframes logoSlideDown {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    /* Aplicar animación de entrada pero mantener estático después */
    .kombo-logo {
        animation: logoSlideDown 0.8s ease-out forwards !important;
        animation-fill-mode: forwards !important;
    }

    /* Efecto de brillo opcional - DESACTIVADO */
    /*
    .kombo-logo::after {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        border-radius: 10px;
    }

    .kombo-logo:hover::after {
        opacity: 1;
    }
    */

    /* ===== AJUSTAR OTROS ELEMENTOS PARA NO SOLAPARSE ===== */

    /* Experience Mode Button - moverlo más a la derecha y abajo */
    .experience-mode-btn {
        position: fixed !important;
        top: 25px !important;
        right: 30px !important;
        z-index: 999 !important; /* Debajo del logo */
    }

    /* Theme Toggle - mantener su posición */
    .theme-toggle {
        position: fixed !important;
        top: 25px !important;
        right: 90px !important; /* Más a la izquierda del Experience button */
        z-index: 999 !important;
    }

    /* Si hay un back button, posicionarlo a la izquierda */
    .back-button,
    #back-to-2d {
        position: fixed !important;
        top: 25px !important;
        left: 30px !important;
        transform: none !important;
        z-index: 999 !important;
    }
}

/* ===== TABLET - AJUSTES ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .kombo-logo {
        top: 20px !important;
    }

    .kombo-text {
        font-size: 1.3rem !important;
    }

    .experience-mode-btn {
        top: 20px !important;
        right: 20px !important;
    }

    .theme-toggle {
        right: 75px !important;
        top: 20px !important;
    }
}

/* ===== DESKTOP GRANDE - AJUSTES ===== */
@media (min-width: 1600px) {
    .kombo-logo {
        top: 30px !important;
    }

    .kombo-text {
        font-size: 1.6rem !important;
    }
}

/* ===== MOBILE - MANTENER EN ESQUINA ===== */
@media (max-width: 768px) {
    /* En móvil, el logo debe estar en la esquina para ahorrar espacio */
    .kombo-logo {
        position: fixed !important;
        top: 15px !important;
        left: 15px !important; /* Esquina izquierda en móvil */
        transform: none !important;
        right: auto !important;
        font-size: 1rem !important;
        padding: 7px 12px !important;
        background: rgba(0, 0, 0, 0.85) !important;
        border: 1px solid rgba(14, 165, 233, 0.3) !important;
        border-radius: 6px !important;
        z-index: 1099 !important;
    }

    .kombo-text {
        font-size: 0.9rem !important;
    }

    /* Experience button en móvil */
    .experience-mode-btn {
        top: 15px !important;
        right: 15px !important;
    }

    /* Mobile menu button */
    .mobile-menu-btn {
        top: 65px !important;
        right: 15px !important;
    }
}

/* ===== EFECTOS ADICIONALES ===== */

/* Pulse effect on load - DESACTIVADO */
/*
@keyframes logoPulse {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}
*/

/* Aplicar animación de entrada */
.kombo-logo {
    animation: logoSlideDown 0.8s ease-out forwards !important;
}

/* Gradient text effect - DESACTIVADO */
/* Mantener color original sin gradiente */

/* ===== Z-INDEX HIERARCHY ===== */
/* Asegurar que el logo esté en el nivel correcto */
.kombo-logo { z-index: 1000 !important; }
.experience-mode-btn { z-index: 999 !important; }
.theme-toggle { z-index: 999 !important; }
.mobile-menu-btn { z-index: 998 !important; }
.side-nav { z-index: 100 !important; }

/* ===== LIGHT THEME ADJUSTMENTS ===== */
[data-theme="light"] .kombo-text,
[data-theme="light"] .kombo-base {
    color: #1a1a2e !important; /* Mantener color oscuro en tema claro */
}

/* Sin cambios en hover para tema claro */
[data-theme="light"] .kombo-logo:hover .kombo-text,
[data-theme="light"] .kombo-logo:hover .kombo-base {
    color: #1a1a2e !important; /* Mismo color, sin cambio */
}

/* ===== OVERRIDE ABSOLUTO - LOGO SIEMPRE ESTÁTICO ===== */
/* Esta regla tiene máxima prioridad para evitar CUALQUIER movimiento */
.kombo-logo,
.kombo-logo:hover,
.kombo-logo:active,
.kombo-logo:focus,
a.kombo-logo,
a.kombo-logo:hover {
    transform: translateX(-50%) !important; /* SIEMPRE centrado, nunca se mueve */
    left: 50% !important;
    position: fixed !important;
}