/* ================================
   SUBMENÚ SOLO CON CLICK (NO HOVER)
   ================================ 

/* 1) Submenús ocultos por defecto */
.main-nav .sub-nav,
#main-nav .sub-nav,
.dt-header-menu .sub-nav{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .15s ease;
}

/* 2) Desactivar hover */
.main-nav li:hover > .sub-nav,
#main-nav li:hover > .sub-nav,
.dt-header-menu li:hover > .sub-nav{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 3) Mostrar al click (focus) SOLO cuando estamos listos */
html.dt-nav-ready .main-nav li:focus-within > .sub-nav,
html.dt-nav-ready #main-nav li:focus-within > .sub-nav,
html.dt-nav-ready .dt-header-menu li:focus-within > .sub-nav{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.dt-nav-away .sub-nav{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* 4) Mantener abierto en páginas hijas */
.main-nav li.current-menu-ancestor > .sub-nav,
.main-nav li.current-menu-parent > .sub-nav,
.main-nav li.current-menu-item > .sub-nav,
#main-nav li.current-menu-ancestor > .sub-nav,
#main-nav li.current-menu-parent > .sub-nav,
#main-nav li.current-menu-item > .sub-nav,
.dt-header-menu li.current-menu-ancestor > .sub-nav,
.dt-header-menu li.current-menu-parent > .sub-nav,
.dt-header-menu li.current-menu-item > .sub-nav{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex;
  justify-content: left;
}

/* ================================
   BARRA HORIZONTAL SIN RECUADRO
   ================================ */

/* El li padre no limita el ancho */
.main-nav li.menu-item-has-children,
#main-nav li.menu-item-has-children,
.dt-header-menu li.menu-item-has-children{
  position: static;
}

/* Submenú como barra debajo del header */
.main-nav li.menu-item-has-children > .sub-nav,
#main-nav li.menu-item-has-children > .sub-nav,
.dt-header-menu li.menu-item-has-children > .sub-nav{
  position: absolute !important;
  right: auto !important;
  left: auto !important;
  width: auto !important;
  top: 63% !important;
  margin: 0px !important;
  padding: 0px 0px !important;
  /*background: linear-gradient(
    to right,
    rgb(149 205 232),
    rgba(0,0,0,0.0)
  ) !important;*/
  background: rgb(212 206 206 / 35%);
  border: none !important;
  box-shadow: none !important;
  z-index: 9999;
  border-radius:3px;
}

/* Submenú horizontal */
.main-nav li.menu-item-has-children > .sub-nav > li,
#main-nav li.menu-item-has-children > .sub-nav > li,
.dt-header-menu li.menu-item-has-children > .sub-nav > li{
  display: inline-block;
  margin-left: 16px;
  
  white-space: nowrap;
}

/* Links sin fondo */
.dt-header-menu .sub-nav a{
  background: transparent !important;
}


/* === Anti-superposición: solo un submenu visible a la vez === */


/* Oculto por defecto 
.main-nav .sub-nav,
#main-nav .sub-nav,
.dt-header-menu .sub-nav{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Mostrar SOLO si el li tiene la clase puesta por JS */


html.dt-nav-away .sub-nav{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}