/* --- Estilos del Menú Principal --- */
.menu-principal-nav {
    background-color: #333; /* Color de fondo oscuro para el menú */
    padding: 0 15px;        /* Padding horizontal */
    display: flex;          /* Usar flexbox para alinear logo y lista */
    align-items: center;    /* Centrar verticalmente logo y lista */
    justify-content: space-between; /* Espacio entre logo y menú (se ajustará) */
    width: 100%;
    box-sizing: border-box; /* Incluir padding en el ancho total */
    position: relative; /* Necesario para el menú desplegable en móvil */
}

/* Estilos para hacerlo fijo (sticky) */
.sticky-menu {
    position: sticky;
    top: 0;                 /* Pegar al borde superior */
    z-index: 1010;         /* Debe estar sobre la tabla (z-index: 10) y otros elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra opcional */
}

.menu-logo {
    height: 40px;          /* Ajusta la altura del logo */
    width: auto;           /* Ancho automático para mantener proporción */
    margin-right: 20px;    /* Espacio a la derecha del logo */
    flex-shrink: 0;       /* Evitar que el logo se encoja */
}

/* Ocultar hamburguesa en escritorio */
.menu-hamburguesa {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}
.menu-hamburguesa span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff; /* Color de las barras */
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}


.menu-lista {
    list-style: none;       /* Quitar bullets */
    margin: 0 auto; /* Centrar la lista horizontalmente */
    padding: 0;
    display: flex;          /* Items en horizontal */
    flex-grow: 1; /* Permite que la lista ocupe espacio para centrarse */
     justify-content: center; /* Centrar items dentro de la lista */
}

.menu-lista li {
    position: relative;     /* Para posicionar submenus */
    margin: 0 5px;         /* Espacio horizontal entre items principales */
}

.menu-lista a {
    display: block;         /* Hacer todo el área clickeable */
    padding: 15px 20px;    /* Padding para tamaño y separación */
    color: #fff;           /* Color del texto */
    text-decoration: none;  /* Quitar subrayado */
    white-space: nowrap;    /* Evitar que el texto del menú se parta */
    transition: background-color 0.2s ease;
}

.menu-lista > li:hover > a { /* Solo para items de primer nivel */
    background-color: #555; /* Color de fondo al pasar el mouse */
}

/* --- Submenus --- */
.submenu {
    display: none;          /* Oculto por defecto */
    position: absolute;
    top: 100%;             /* Justo debajo del item padre */
    left: 0;
    background-color: #444; /* Fondo ligeramente diferente */
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 200px;       /* Ancho mínimo del desplegable */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 1011;         /* Encima del menú principal */
    border-radius: 0 0 4px 4px; /* Bordes redondeados abajo */
}

.submenu li {
    margin: 0;             /* Sin margen interno en submenus */
    width: 100%;           /* Ocupar todo el ancho del submenu */
}

.submenu a {
    padding: 10px 15px;    /* Padding diferente para submenus */
    color: #eee;           /* Color de texto submenu */
    white-space: normal;   /* Permitir que texto largo se divida */
     width: 100%;          /* Asegurar que ocupa el ancho completo del li */
     box-sizing: border-box; /* Padding incluido en el width */
}

.submenu li:hover > a {
    background-color: #666;
}

/* Sub-submenus (anidados) */
.submenu .submenu {
    top: 0;                /* Alinear arriba con el item padre del submenu */
    left: 100%;            /* Posicionar a la derecha */
    border-radius: 0 4px 4px 4px; /* Ajustar bordes */
     margin-top: -1px; /* Ajuste fino para superposición de borde */
      margin-left: 0px; /* Sin margen izquierdo */
}

/* Mostrar submenus al hacer hover en el LI padre */
.menu-lista li:hover > .submenu {
    display: block;
}

/* Indicador visual para columnas ocultas/visibles en el menú */
.menu-lista #submenu-columnas a.columna-visible::before {
    content: '? '; /* Checkmark para visibles */
    color: lightgreen;
    display: inline-block;
     width: 1.5em; /* Espacio para el icono */
     text-align: center;
}
.menu-lista #submenu-columnas a.columna-oculta::before {
     content: '? '; /* Círculo para ocultas */
     color: #ccc;
      display: inline-block;
     width: 1.5em;
     text-align: center;
}


/* --- Responsividad del Menú --- */
@media (max-width: 992px) { /* Ajusta este breakpoint si es necesario */
    .menu-logo {
         /* Logo puede necesitar ajustarse o se deja como está */
          margin-right: auto; /* Empujar logo a la izquierda */
    }
    .menu-hamburguesa {
        display: block; /* Mostrar botón hamburguesa */
        order: 3; /* Moverlo al final en el flex container si es necesario */
        margin-left: 15px;
    }
    .menu-lista {
        display: none; /* Ocultar menú horizontal por defecto */
        position: absolute;
        top: 100%; /* Debajo de la barra de navegación */
        left: 0;
        width: 100%;
        background-color: #333; /* Mismo fondo que la barra */
        flex-direction: column; /* Items en vertical */
        padding: 10px 0;      /* Padding vertical */
        margin: 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        border-top: 1px solid #555;
         z-index: 1009; /* Debe estar debajo del menú pero sobre el resto */
         max-height: calc(100vh - 60px); /* Altura máxima, ~60px altura de nav */
         overflow-y: auto; /* Scroll si hay muchos items */
    }

    .menu-lista.menu-abierto { /* Clase que se añade con JS */
        display: flex;
    }

    .menu-lista li {
        margin: 0; /* Sin margen horizontal en móvil */
        width: 100%;
        border-bottom: 1px solid #555; /* Separador */
    }
    .menu-lista li:last-child {
         border-bottom: none;
    }


    .menu-lista a {
        padding: 12px 20px; /* Ajustar padding para vertical */
         text-align: left; /* Alinear texto a la izquierda */
    }

    /* Submenus en móvil */
    .submenu {
        position: static; /* Dejan de ser absolutos */
        display: block;  /* Siempre visibles cuando el padre está visible */
        background-color: #3a3a3a; /* Fondo ligeramente diferente */
        box-shadow: none; /* Sin sombra anidada */
        border-radius: 0;
        min-width: unset; /* Sin ancho mínimo */
        padding-left: 20px; /* Indentación para submenus */
         /* Ocultarlos inicialmente hasta que se active el menú */
         display: none; /* IMPORTANTE: Ocultos hasta que se expanda */
    }
     /* Estilos específicos para mostrar/ocultar en móvil */
      .menu-lista li.submenu-abierto > .submenu {
         display: block;
      }

     .menu-lista li.submenu-abierto > a {
         background-color: #555; /* Indicar que está abierto */
     }

    .submenu li {
         border-bottom: 1px dashed #666; /* Separador más suave */
    }
    .submenu li:last-child {
         border-bottom: none;
    }

    .submenu a {
        padding: 10px 20px;
    }

    /* Ocultar sub-submenus inicialmente en móvil también */
    .submenu .submenu {
        padding-left: 20px; /* Mayor indentación */
         /* También oculto por defecto */
         display: none;
    }
     /* Mostrar sub-submenus si su padre li tiene la clase */
     .submenu li.submenu-abierto > .submenu {
        display: block;
     }

    /* Reset hover effect for main menu items in mobile (click triggers submenus) */
    .menu-lista > li:hover > a {
        background-color: transparent; /* O el color base #333 */
    }
     .menu-lista > li > a:hover { /* Permitir hover en el link directo sí */
          background-color: #555;
     }

      /* Añadir indicador de despliegue en móvil para items con submenu */
       .menu-lista li:has(> .submenu) > a::after {
           content: ' +'; /* O ? / ? */
           float: right; /* Alinear a la derecha */
           margin-left: 5px;
       }
        /* Cambiar indicador cuando está abierto */
        .menu-lista li.submenu-abierto:has(> .submenu) > a::after {
           content: ' –'; /* O ? / ? */
       }
}