/* ./css/menu.css - REVISIÓN FINAL PARA ESTILOS, COLUMNAS Y POSICIONAMIENTO */

/* 1. Contenedor Principal (Superposición y Ancho) */
#mainNav.dropdown-menu-overlay {
    position: absolute;  /* Crucial para superponerse al <main> */
    z-index: 1000;       /* Asegura que esté encima del contenido */
    
    /* CORRECCIÓN 3: Posicionamiento. Este valor DEBE coincidir con la altura final de tu Header. */
    top: 100px;           /* <---- AJUSTAR ESTE VALOR MANUALMENTE (e.g., 60px, 80px, 100px) */

    left: 5%;            /* (100% - 90%) / 2 para centrar el 90% de ancho */
    width: 90%;          /* Ancho solicitado */
    max-height: 80vh;    /* Limita la altura del menú para que no exceda la pantalla */
    overflow-y: auto;    /* Permite el scroll interno */
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    display: none;       /* Inicialmente oculto. JS lo activa/desactiva */
}

#mainNav.menu-abierto {
    display: block; /* La clase que JavaScript alterna */
}

/* 2. Estilos de la Lista y Columnas Base (Escritorio/Tablet) */
.menu-list {
    list-style: none;
    padding: 10px;
    margin: 0;
    
    /* Configuración de Columnas por Defecto (Escritorio: 4 columnas) */
    column-count: 4; 
    column-gap: 30px; 
    
    break-inside: avoid-column; /* Evita que los ítems se corten */
    -webkit-break-inside: avoid-column;
}

.menu-item {
    padding: 3px 0;
    width: 100%; 
}

.menu-item a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 3px 0;
}

/* 3. Indentación y Estilos Visuales */

/* CORRECCIÓN 1 y 2: Estilo para Rubros y Artículos Destacados (sin border-bottom) */
.menu-rubro {
    font-weight: bold;
    margin-top: 10px;
    padding-bottom: 5px;
    /* Se elimina el border-bottom */
    
    break-after: avoid; 
}

.menu-subrubro a {
    /* Indentación para subrubros */
    padding-left: 15px; 
    font-size: 0.95em;
}

.menu-separator {
    /* Espacio visual entre rubros */
    height: 10px;
    background-color: transparent;
    width: 100%;
    break-after: always; 
}

/* 4. Media Queries para Responsividad */

/* Pantallas Medianas (Tablet): 3 Columnas */
@media (min-width: 768px) and (max-width: 1024px) {
    .menu-list {
        column-count: 3;
    }
}

/* Pantallas Pequeñas (Móvil): 1 Columna */
@media (max-width: 767px) {
    .menu-list {
        column-count: 1; 
        column-gap: 0;
    }
    
    #mainNav.dropdown-menu-overlay {
        left: 0;
        width: 100%;
        padding: 5px;
    }
}