/* ===============================
  NAVBAR PRINCIPAL
  ===============================
  Estilos para el menú de navegación principal, incluyendo la disposición,
  alineación, colores y efectos de hover/activo de los elementos principales.
*/

/* Contenedor del menú principal (ul.menu-principal):
  Define la estructura base del navbar, alineando los elementos horizontalmente
  y aplicando tipografía y fondo. */
.menu-principal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start; /* Alinea los botones a la izquierda */
  align-items: center; /* Centra verticalmente */
  background: #fff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

/* Elementos del menú principal (li):
  Cada opción del menú principal, con separación y posición relativa para submenús. */
.menu-principal > li {
  position: relative;
  margin: 0 3px 0 0;
}
.menu-principal > li:last-child {
  margin-right: 0;
}

/* Enlaces del menú principal (a):
  Estilo de los links principales, con padding, color y transición de fondo/color. */
.menu-principal > li > a {
  display: block;
  padding: 12px 15px;
  color: #020d26;
  background: transparent;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.3s, color 0.3s;
  margin: 0 0 7px 0;
}

/* Icono de flecha en los enlaces con submenú (usualmente usando FontAwesome):
  Espaciado y alineación del ícono de despliegue. */
.menu-principal > li > a .fa-chevron-down {
  margin-left: 14px;
  font-size: 13px;
  vertical-align: middle;
}

/* Estado activo y hover en menú principal:
  Cambia el fondo y color del enlace cuando está activo o en hover. */
.menu-principal > li.activo > a,
.menu-principal > li:hover > a {
  background: #005189;
  color: #fff;
  border-radius: 4px 4px 0 0;
}

/* ===============================
  SUBMENÚS Y MEGAMENÚ
  ===============================
  Estilos para submenús desplegables y megamenús, incluyendo visibilidad,
  posición, fondo y efectos de hover. */

/* Contenedores de submenú y megamenú (ul.submenu, ul.megamenu):
  Ocultos por defecto, se muestran al hacer hover/focus en el elemento padre. */
.submenu,
.megamenu {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  min-width: 220px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 8px 8px;
  z-index: 1000;
  padding: 8px 0;
}

/* Mostrar submenú/megamenu al hacer hover o focus en el elemento padre. */
.menu-principal > li:hover > .submenu,
.menu-principal > li:focus-within > .submenu,
.menu-principal > li:hover > .megamenu,
.menu-principal > li:focus-within > .megamenu {
  display: block;
}

/* Enlaces de submenú y megamenú (a):
  Padding, color y transición para los enlaces internos de los menús desplegables. */
.submenu li a,
.megamenu li a {
  display: block;
  padding: 10px 24px;
  color: #1a232b;
  background: transparent;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
}

/* Hover en enlaces de submenú y megamenú:
  Cambia el fondo y color al pasar el mouse sobre los enlaces internos. */
.submenu li a:hover,
.megamenu li a:hover {
  background: #005189;
  color: #fff;
}

/* ===============================
  MEGAMENÚ (ESTRUCTURA Y ESTILOS)
  ===============================
  Estructura y estilos específicos para megamenús con varias columnas. */

/* .megamenu:
   Contenedor de megamenú, oculto por defecto, con varias columnas y sombra.
   Centrado respecto al elemento padre. */
.megamenu {
  display: none;
  gap: 0px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-top: 1px solid #eee;
  justify-content: center; /* Centra las columnas del megamenú */
  max-width: 100vw; /* Opcional: evita desbordes */
  left: 230%; /* Centra respecto al padre */
  transform: translateX(-50%);
}
.menu-principal > li:hover > .megamenu,
.menu-principal > li:focus-within > .megamenu {
  display: flex;
}

.megamenu > li {
  min-width: 180px;
  border-right: 1px solid #e0e0e0;
  background: #fff;
}

.megamenu > li:last-child {
  border-right: none;
}

/* Título de columna en megamenú (a):
  Estilo para los títulos de cada columna del megamenú. */
.megamenu > li > a {
  min-height: 90px; /* Altura mínima de división en megamenú */
  display: flex; /* Usar flexbox para centrar contenido */
  align-items: center; /* Centrar verticalmente */
  font-weight: 700;
  font-size: 17px;
  color: #222;
  background: #fff;
  padding: 0 18px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 0;
  box-sizing: border-box; /* border-box para incluir padding y border en el tamaño */
}

/* Lista interna de cada columna (ul):
  Quita estilos de lista y ajusta padding/margin. */
.megamenu > li > ul {
  list-style: none;
  margin: 0;
  padding: 0 0 16px 0;
}

/* Enlaces internos del megamenú (a):
  Estilo para los enlaces de las opciones dentro de cada columna. */
.megamenu > li > ul > li > a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 18px;
  color: #222;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  border-radius: 0;
  transition: background 0.3s, color 0.3s;
}
/* ===============================
  RESPONSIVE (MÓVIL)
  ===============================
  Adaptaciones para pantallas menores a 992px: menú vertical, submenús y megamenús
  adaptados a ancho completo y sin sombras/bordes. */

@media (max-width: 992px) {
  /* ===============================
     RESPONSIVE (MÓVIL)
     ===============================
     Estas reglas adaptan el menú de navegación para dispositivos móviles o pantallas pequeñas.
     El menú principal se muestra en columna, los submenús y megamenús se expanden a todo el ancho,
     y se eliminan sombras y bordes para una apariencia más simple y usable en móvil.
  */

  /* El menú principal se apila en columna y ocupa todo el ancho */
  .menu-principal {
    flex-direction: column; /* Cambia de fila a columna */
    align-items: flex-start; /* Alinea los ítems al inicio */
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    box-shadow: none; /* Sin sombra en móvil */
    border-radius: 0;
  }

  /* Cada elemento del menú ocupa todo el ancho y elimina márgenes */
  .menu-principal > li {
    width: 100%;
    margin: 0;
  }

  /* Los enlaces del menú principal se expanden y alinean a la izquierda */
  .menu-principal > li > a {
    border-radius: 0;
    padding: 14px 18px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    text-align: left;
  }

  /* Submenús se muestran debajo del ítem padre, ocupando todo el ancho */
  .submenu {
    position: static; /* Ya no es absoluto, sino flujo normal */
    min-width: 100%;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    background: #fff;
    z-index: 1;
    padding: 0;
  }

  /* Megamenú se adapta a móvil: ocupa todo el ancho, sin bordes ni sombra */
  .megamenu {
    display: block !important; /* Siempre visible si está activo */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* Cada columna del megamenú se muestra como bloque y ocupa todo el ancho */
  .megamenu > li {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: #fff !important;
    padding: 0 !important;
  }

  /* El título de columna del megamenú se oculta en móvil */
  .megamenu > li > a {
    display: none !important;
  }

  /* Lista interna de cada columna sin estilos y sin padding extra */
  .megamenu > li > ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* Enlaces internos del megamenú ocupan todo el ancho y se alinean a la izquierda */
  .megamenu > li > ul > li > a {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    text-align: left !important; /* Usa left si prefieres alineado a la izquierda */
    box-sizing: border-box !important;
    background: #fff !important;
    color: #1a232b !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border: none !important;
  }

  /* Por defecto, los submenús y megamenús están ocultos en móvil */
  .submenu,
  .megamenu {
    display: none !important;
  }

  /* Se muestran al enfocar el ítem padre (accesibilidad y navegación por teclado) */
  .menu-principal > li:focus-within > .submenu,
  .menu-principal > li:focus-within > .megamenu {
    display: block !important;
  }
}