/* Estilos personalizados para el header */

/* Header siempre fijo en la parte superior (sticky) */
#header.defualt {
    background: #4a4a4a !important; /* Color gris similar a la imagen */
    position: fixed !important; /* Fixed para que se mantenga siempre visible */
    top: 0 !important; /* Siempre en la parte superior */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important; /* Asegurar que esté por encima de todo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Sombra para diferenciarlo del contenido */
}

.mega-menu > section.menu-list-items {
    background-color: #4a4a4a !important; /* Mismo color para la sección del menú */
}

/* Asegurar que el mega-menu no tenga espacios adicionales */
.mega-menu {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Agregar espacio en el body para compensar el header fijo */
body {
    margin-top: 0 !important;
    padding-top: 90px !important; /* Espacio para el header fijo */
}

/* Eliminar cualquier margen del contenido principal */
.container,
.container-fluid,
main,
router-outlet,
router-outlet + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Asegurar que el primer elemento después del header no tenga margen */
#header + *,
header + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Eliminar gap específico del fondo de imagen */
.imgback {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Eliminar espacios de todos los componentes principales */
app-catalogo,
app-home,
app-about,
app-contacto {
    display: block;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ocultar todas las migas de pan (breadcrumbs) */
.page-breadcrumb,
ul.page-breadcrumb,
.page-breadcrumb li,
ul.page-breadcrumb li,
li.page-breadcrumb {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar contenedores específicos que contienen breadcrumbs */
.text-md-right .page-breadcrumb {
    display: none !important;
}

/* Reducir altura del header */
.mega-menu .menu-links > li {
    line-height: 80px !important; /* Reducir altura de línea para hacer el header más compacto */
}

.mega-menu .menu-links > li > a {
    line-height: 80px !important; /* Reducir altura de línea de los enlaces */
}

/* Reducir padding del logo para hacer el header más compacto */
.mega-menu .menu-logo {
    padding: 15px 0px !important; /* Reducir padding del logo */
}

.mega-menu .menu-logo > li {
    line-height: 60px !important; /* Reducir línea de altura del logo */
}

/* Ajustar la altura mínima del mega-menu más compacta */
.mega-menu {
    min-height: 80px !important;
}

/* Ajustar iconos de búsqueda y carrito para la nueva altura */
.mega-menu .iconbusq,
.mega-menu .iconcar {
    top: 25px !important; /* Reposicionar iconos para la nueva altura */
}

/* Estilos para hacer las imágenes de categorías clickeables */
.image-container a {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.image-container a:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.image-container a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    cursor: pointer;
}

/* Responsive - mantener comportamiento en móvil */
@media screen and (max-width: 992px) {
    .mega-menu .menu-links > li {
        line-height: 44px !important;
    }
    
    .mega-menu .menu-links > li > a {
        line-height: normal !important;
    }
    
    /* Asegurar que el menú móvil se muestre correctamente en la parte superior */
    .menucel {
        position: fixed !important; /* Cambiar de absolute a fixed */
        top: 0 !important; /* En la parte superior */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important; /* Por encima del header desktop */
        background-color: #4a4a4a !important; /* Mismo color que el header */
    }
    
    /* Ajustar el body padding para móvil con el menú fijo */
    body {
        padding-top: 60px !important; /* Menos espacio para móvil */
    }
    
    /* Asegurar que el dropdown del menú móvil se posicione correctamente */
    .menuceldespl {
        position: fixed !important;
        top: -100% !important; /* Inicialmente oculto arriba */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        transition: top 0.2s ease-in-out !important;
    }
    
    /* Cuando el menú está abierto, aparece debajo del header móvil */
    .menuceldespl[style*="top: 0"] {
        top: 60px !important;
    }
}