/* Estilos personalizados para el header */

/* Cambiar el fondo del header de transparente a gris */
#header.defualt {
    background: #4a4a4a !important; /* Color gris similar a la imagen */
    position: relative !important; /* Cambiar de absolute a relative para que ocupe espacio */
}

.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;
}

/* Eliminar gap entre header y contenido */
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 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;
    }
}