/* ============================================== */
/* === ESTILOS PARA MENÚ HAMBURGUESA (MÓVIL) ==== */
/* ============================================== */

/* Ocultar el botón de menú en computadoras de escritorio */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--accent-color);
    /* Naranja vibrante del nuevo tema */
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px 10px;
    transition: transform 0.3s ease;
}

.menu-toggle:focus {
    outline: none;
}

/* Aplicar la vista móvil desde tablets (992px) hacia abajo */
@media (max-width: 992px) {

    /* Forzar que el logo y el botón estén en la misma línea */
    .main-header {
        flex-direction: row !important;
        justify-content: space-between !important;
        flex-wrap: wrap;
        /* Permite que el menú colapse hacia abajo */
        align-items: center;
    }

    /* Mostrar el botón hamburguesa */
    .menu-toggle {
        display: block;
    }

    /* Ocultar el menú por defecto y prepararlo para ocupar todo el ancho */
    .main-nav {
        width: 100%;
        display: none;
        /* Oculto inicialmente */
        margin-top: 15px !important;
        animation: fadeInMenu 0.3s ease;
    }

    /* Clase que se activa con JavaScript para mostrar el menú */
    .main-nav.active {
        display: block;
    }

    /* Estilizar la caja del menú desplegado */
    .main-nav ul {
        flex-direction: column !important;
        background-color: #1e293b;
        /* Azul Pizarra del nuevo tema */
        padding: 20px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }
}

/* Animación suave al abrir el menú */
@keyframes fadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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