/**
 * Menu Alignment CSS
 * Estilos adicionales para centrar verticalmente el menú de navegación
 * Mantiene los estilos base sin modificar main.css
 */

/* ================================================
   CENTRADO VERTICAL DEL MENÚ PRINCIPAL
   ================================================ */

/* Contenedor principal del navbar */
.nai_nav_bar {
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Contenedor de la marca/logo */
.nai_nav_bar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Imagen del logo centrada y más grande */
.nai_nav_menu_logo_img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    height: 70px !important; /* Aumentado de 60px a 70px */
    max-width: 240px !important; /* Aumentado de 200px a 240px */
    max-height: 70px !important;
}

/* Botón hamburguesa centrado */
.nai_nav_bar .navbar-toggler {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 8px 12px !important;
}

/* Contenedor del collapse centrado */
.nai_nav_collapse {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Contenedor de los links de navegación */
.nai_nav_links {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100% !important;
}

/* Enlaces individuales del menú */
.nai_nav_links .nav-item {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.nai_nav_links .nav-link {
    display: flex !important;
    align-items: center !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* C-Tool link centrado */
.nai_nav_ctool {
    display: flex !important;
    align-items: center !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    line-height: 1.2 !important;
}

/* Sección de accesibilidad centrada */
#Acce {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#Acce > a {
    display: flex !important;
    align-items: center !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* ================================================
   RESPONSIVE PARA MÓVILES
   ================================================ */

/* Tablets y móviles grandes */
@media (max-width: 991.98px) {
    .nai_nav_bar {
        min-height: 70px !important;
    }
    
    /* En móvil, el collapse se expande verticalmente */
    .nai_nav_collapse.show,
    .nai_nav_collapse.collapsing {
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Enlaces en móvil - stack vertical pero cada uno centrado */
    .nai_nav_links {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .nai_nav_links .nav-item {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }
    
    .nai_nav_links .nav-link {
        justify-content: center !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    
    .nai_nav_ctool {
        justify-content: center !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    
    #Acce {
        justify-content: center !important;
        margin-top: 10px !important;
    }
}

/* Móviles pequeños */
@media (max-width: 768px) {
    .nai_nav_bar {
        min-height: 65px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .nai_nav_menu_logo_img {
        height: 60px !important; /* Aumentado de 50px a 60px para móviles */
        max-width: 200px !important; /* Aumentado de 180px a 200px */
    }
    
    .nai_nav_links .nav-link {
        font-size: 18px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .nai_nav_ctool {
        font-size: 18px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* Móviles muy pequeños */
@media (max-width: 576px) {
    .nai_nav_bar {
        min-height: 60px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .nai_nav_menu_logo_img {
        height: 55px !important; /* Aumentado de 45px a 55px para móviles pequeños */
        max-width: 180px !important; /* Aumentado de 160px a 180px */
    }
    
    .nai_nav_links .nav-link {
        font-size: 16px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .nai_nav_ctool {
        font-size: 16px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* ================================================
   MEJORAS ADICIONALES DE ALINEACIÓN
   ================================================ */

/* Asegurar que todos los elementos flex estén centrados */
.navbar-expand-md .navbar-nav {
    align-items: center !important;
}

.navbar-expand-md .navbar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
}

/* Fix para elementos que pueden tener altura inconsistente */
.nai_nav_bar * {
    box-sizing: border-box !important;
}

/* Prevenir saltos de línea no deseados */
.nai_nav_links .nav-item .nav-link {
    white-space: nowrap !important;
}

/* ================================================
   ESTADOS HOVER Y FOCUS MEJORADOS
   ================================================ */

.nai_nav_links .nav-link:hover,
.nai_nav_links .nav-link:focus {
    transform: translateY(0) !important; /* Prevenir movimiento vertical en hover */
}

.nai_nav_ctool:hover,
.nai_nav_ctool:focus {
    transform: translateY(0) !important; /* Prevenir movimiento vertical en hover */
}

/* ================================================
   COMPATIBILIDAD CON ACCESIBILIDAD
   ================================================ */

/* Mantener el centrado cuando se activan los controles de accesibilidad */
.nai_nav_accesibilidad_controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* En móvil, los controles de accesibilidad también centrados */
@media (max-width: 991.98px) {
    .nai_nav_accesibilidad_controls {
        margin-top: 10px !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ================================================
   OPTIMIZACIÓN PARA LA PRIMERA IMAGEN DEL CAROUSEL
   ================================================ */

/* Preload crítico para la primera imagen del carousel */
.carousel-inner .item:first-child .fill {
    /* Forzar carga inmediata sin lazy loading */
    background-image: url('../img/slider/aluminio.jpeg') !important;
    /* Optimizaciones para carga rápida */
    will-change: transform !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    /* Asegurar alta calidad */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Prevenir el efecto gris/pixelado */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Preload específico para dispositivos de alta densidad */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
    .carousel-inner .item:first-child .fill {
        /* Usar imagen optimizada para retina si está disponible */
        background-image: url('../img/slider/aluminio.jpeg') !important;
        /* Suavizar el renderizado */
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Fix para el efecto de carga gris */
.carousel-inner .item.active .fill {
    transition: opacity 0.1s ease-in !important;
    opacity: 1 !important;
}

/* Asegurar que no haya lazy loading en el carousel principal */
#myCarousel .fill {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ================================================
   DEBUG - REMOVER EN PRODUCCIÓN
   ================================================ */

/*
// Para debuggear, descomenta estas líneas:
.nai_nav_bar {
    border: 2px solid red !important;
}

.nai_nav_links {
    border: 1px solid blue !important;
}

.nav-item {
    border: 1px solid green !important;
}
*/