/* ==========================================
   MENÚ ANCHO COMPLETO (DESKTOP)
   ========================================== */
ul.menu-institucional {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%; /* Forzar el 100% de ancho */
  background-color: #1b2a47; /* Azul institucional */
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Distribución equitativa de los botones */
ul.menu-institucional > li {
  position: relative;
  flex: 1 1 auto; /* Permite que los elementos se distribuyan en todo el ancho */
  text-align: center;
}

ul.menu-institucional > li > a,
ul.menu-institucional > li > span {
  display: block;
  padding: 14px 15px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap; /* Evita que los textos largos se rompan en dos líneas */
  transition: background-color 0.3s ease;
}

/* Hover en escritorio */
ul.menu-institucional > li:hover > a,
ul.menu-institucional > li:hover > span {
  background-color: #2c3e50;
  color: #3498db;
}

/* ==========================================
   SUBMENÚS DESPLEGABLES (DESKTOP)
   ========================================== */
ul.menu-institucional li ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background-color: #ffffff;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-top: 3px solid #1b2a47;
  text-align: left;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease-in-out;
  z-index: 1000;
}

ul.menu-institucional li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

ul.menu-institucional li ul li a {
  display: block;
  padding: 10px 16px;
  color: #333333;
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 1px solid #f0f0f0;
  white-space: normal; /* Permite salto de línea en submenús si son muy largos */
}

ul.menu-institucional li ul li a:hover {
  background-color: #f8f9fa;
  color: #1b2a47;
}

/* ==========================================
   ADAPTACIÓN PARA MÓVILES Y TABLETS (RESPONSIVO)
   ========================================== */
@media (max-width: 991px) {
  ul.menu-institucional {
    flex-direction: column; /* Cambia la barra horizontal a vertical */
    width: 100%;
  }

  ul.menu-institucional > li {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  ul.menu-institucional > li > a,
  ul.menu-institucional > li > span {
    padding: 12px 20px;
  }

  /* Submenús en modo móvil */
  ul.menu-institucional li ul {
    position: static; /* Se despliega de manera integrada en la lista */
    width: 100%;
    box-shadow: none;
    background-color: #f8f9fa;
    border-top: none;
    border-left: 4px solid #1b2a47;
    
    /* En móvil se muestran directamente o al tocar */
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none; 
  }

  /* Mostrar submenú al hacer tap/hover en móvil */
  ul.menu-institucional li:hover > ul {
    display: block;
  }
}