/*
 * navbar.css
 * ESTILOS DE BARRA DE NAVEGACIÓN RETRO
 */

/* Importar la fuente retro (ya lo hace style.css, pero se asegura) */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.navbar {
    background-color: #000000 !important;
    background-image: url('https://www.transparenttextures.com/patterns/dark-mosaic.png') !important;
    padding: 15px 0 !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border-bottom: 5px solid #FF00FF !important; /* Borde magenta */
    font-family: 'Press Start 2P', cursive !important;
    letter-spacing: 0.5px !important;
}

/* Logo/Brand */
.navbar-brand {
    font-size: 1.2rem;
    font-weight: 400;
    color: #FFFF00 !important; /* Amarillo Neón */
    text-shadow: 0 0 5px #FFFF00, 0 0 10px rgba(255, 255, 0, 0.7);
}

.navbar-brand img {
    height: 40px !important;
    filter: drop-shadow(0 0 3px #FF00FF); /* Efecto neón en la imagen */
}


/* Ítems de Navegación */
.nav-item {
    position: relative;
    padding: 0 8px !important;
}

.nav-link {
    color: #00FFFF !important; /* Cían Neón */
    font-size: 0.8rem;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-transform: uppercase;
    padding: 8px 12px !important;
}

.nav-link:hover, .nav-link.active {
    color: #FF00FF !important; /* Magenta Neón al pasar/activo */
    text-shadow: 0 0 5px #FF00FF, 0 0 10px rgba(255, 0, 255, 0.7) !important;
    border-bottom: 2px solid #FF00FF;
}

/* Toggler (Botón de Menú Móvil) */
.navbar-toggler {
    border: 2px solid #FFFF00 !important;
    box-shadow: 0 0 8px #FFFF00 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar-toggler-icon {
    /* Cambiar el color de las líneas a Magenta */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C%200%2C%20255%2C%201%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter: drop-shadow(0 0 2px #FF00FF) !important;
}

/* Menú desplegable móvil */
@media (max-width: 991.98px) {
    .navbar-nav {
        padding: 15px 0 !important;
        background-color: rgba(0, 0, 51, 0.95) !important; /* Azul oscuro semi-transparente */
        border: 3px solid #00FFFF;
        margin-top: 10px;
    }
    .nav-link {
        padding: 10px 20px !important;
        border-bottom: 1px dashed rgba(0, 255, 255, 0.3);
    }
}