/* CSS personalizado para colocar el menú en la parte inferior solo en dispositivos móviles */

@media screen and (max-width: 767px) {
    /* Estilos para el menú principal */
    .header-main {
        position: fixed !important;
        display: flex !important;
        flex-direction: row !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        width: 100% !important;
        background-color: #0e0f10 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 9999 !important;
        transform: none !important;
    }
    
    /* Ocultar logo en móvil */
    .header-main .logo {
        display: none !important;
    }
    
    /* Hacer que la lista del menú sea horizontal */
    .header-main ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Estilos para los elementos del menú */
    .header-main ul li {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex: 1 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Estilos para los íconos */
    .header-main ul li a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 20px !important;
    }
    
    /* Ocultar tooltip en móvil */
    .header-main ul li[data-tooltip]:after {
        display: none !important;
    }
    
    /* Ocultar toggle del menú móvil original */
    .header-mobile {
        display: none !important;
    }
    
    /* Ajustar el contenido principal para que no se oculte detrás del menú */
    .page {
        padding-bottom: 70px !important;
    }

    .pt-home .social {
        bottom: 70px !important;
        top: auto !important;
    }

    .pt-home .lang {
        bottom: 70px !important;
        right: 10px !important;
    }
    
    /* Ajustar secciones */
    #about:target .pt-about,
    #resume:target .pt-resume,
    #portfolio:target .pt-portfolio,
    #blog:target .pt-blog,
    #contact:target .pt-contact {
        padding-bottom: 70px !important;
    }
    
    /* Asegurarse que simplebar no interfiera */
    .simplebar-track, .simplebar-scrollbar {
        display: none !important;
    }
}