.navbar {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important; /* Aumentado para superar otros elementos */
    background-color: rgba(17, 24, 39, 0.95); /* Fondo semi-transparente */
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

#navbar-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav-links {
    display: flex !important;
    align-items: center;
    gap: 1.5rem;
}

.nav-link, .dropdown-item {
    color: #ffffff;
    transition: color 0.3s ease;
}

.nav-link:hover, .dropdown-item:hover {
    color: #D4AB53; /* Color de acento */
}

.shiny-button {
    background: linear-gradient(45deg, #4A90E2, #9013FE);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shiny-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.5s;
}

.shiny-button:hover::before {
    left: 100%;
}

.metallic-logo {
    background: linear-gradient(45deg, #B0B0B0, #FFFFFF, #B0B0B0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Theme toggle icon (desktop and mobile) */
#theme-toggle .material-icons,
#theme-toggle-mobile .material-icons {
    font-size: 1.5rem; /* Match navbar icon size */
    color: #ffffff; /* White to match nav-link */
    transition: color 0.3s ease, transform 0.3s ease;
}

#theme-toggle:hover .material-icons,
#theme-toggle-mobile:hover .material-icons {
    color: #D4AB53; /* Accent color on hover */
    transform: scale(1.1); /* Subtle scale effect */
}

/* Mobile styles */
@media (max-width: 767px) {
    .navbar {
        background-color: rgba(17, 24, 39, 0.98); /* Slightly more opaque for mobile */
        backdrop-filter: blur(10px); /* Enhanced blur for modern look */
        padding: 0.75rem 1rem; /* Tighter padding for mobile */
    }

    .nav-links {
        display: none !important;
    }

    #mobile-menu-btn {
        display: block;
        padding: 0.5rem;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    #mobile-menu-btn:hover {
        transform: scale(1.1);
        color: #D4AB53; /* Accent color on hover */
    }

    #mobile-menu-btn svg {
        width: 2rem; /* Larger icon for better touch target */
        height: 2rem;
    }

    #mobile-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Full-screen height */
        background-color: rgba(17, 24, 39, 0.98);
        backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%); /* Start off-screen */
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
        z-index: 999; /* Below navbar but above content */
    }

    #mobile-menu.open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    #mobile-menu a,
    #mobile-menu button {
        padding: 1rem 0;
        transition: color 0.3s ease, transform 0.3s ease;
        text-align: center;
        width: 100%; /* Full-width for touch targets */
        max-width: 300px; /* Limit width for aesthetics */
    }

    #mobile-menu a:hover,
    #mobile-menu button:hover {
        color: #D4AB53; /* Matches desktop accent color */
        transform: scale(1.05); /* Subtle scale effect on hover */
    }

    #mobile-menu button {
        background: none; /* Remove default button styling */
        border: none; /* Clean, minimal look */
    }

    /* Theme toggle button in mobile menu */
    #mobile-menu button#theme-toggle-mobile {
        background: linear-gradient(45deg, #4A90E2, #9013FE); /* Match shiny-button */
        padding: 0.5rem; /* Compact padding for icon */
        border-radius: 9999px; /* Rounded, modern button */
        position: relative;
        overflow: hidden;
    }

    #mobile-menu button#theme-toggle-mobile::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent
        );
        transition: left 0.5s;
    }

    #mobile-menu button#theme-toggle-mobile:hover::before {
        left: 100%;
    }

    /* Close button styling */
    #mobile-menu-close {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        padding: 0.5rem;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    #mobile-menu-close:hover {
        transform: rotate(90deg);
        color: #D4AB53; /* Accent color on hover */
    }

    #mobile-menu-close svg {
        width: 2rem; /* Larger icon for touch */
        height: 2rem;
    }
}