/**
 * Menú multinivel LGD — desplegable de 3 niveles.
 *
 * IMPORTANTE: aquí no hay ninguna @media query. El punto de corte es
 * configurable, así que quien decide si el plugin actúa es el JavaScript:
 * añade la clase `desktop-lgd` al menú cuando la ventana supera el punto de
 * corte, y la quita cuando no. Todo el CSS cuelga de esa clase.
 *
 * Se usa `!important` de forma deliberada en la maquetación: el plugin tiene
 * que imponerse al CSS que el tema ya aplica a `.sub-menu`.
 */

/* ==========================================================================
   1. EL PANEL (solo existe cuando el JS lo ha construido)
   ========================================================================== */
.nav-lgd.desktop-lgd li.has-drilldown-lgd {
	position: relative !important;
}

.nav-lgd.desktop-lgd li.has-drilldown-lgd > .drill-panel-lgd {
	/* Reset de lo que suela poner el tema */
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	position: absolute !important;
	top: 100% !important;
	bottom: auto !important;
	/* El desplazamiento que mantiene el panel dentro de la ventana va en `left`, sin
	   transición: así el panel cerrado ya está en su sitio y, al abrirse, no asoma
	   por el borde de la ventana mientras se anima (lo que ensanchaba la página). */
	left: var(--lgdmm-shift, 0px) !important;
	right: auto !important;
	float: none !important;
	width: max-content !important;
	min-width: 0 !important;
	max-width: calc(100vw - 48px) !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	overflow: hidden !important;

	/* Apariencia propia */
	background: var(--lgdmm-bg, #fff) !important;
	color: var(--lgdmm-ink, #1a1a1a) !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	border-radius: 4px !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16) !important;

	/* Por encima de logotipos, botones y cabeceras pegajosas del tema */
	z-index: 99999 !important;

	/* Estado cerrado. Se oculta con opacidad, y pointer-events evita que el
	   hueco invisible capte el ratón (si no, el menú se abriría al pasar por
	   la zona que ocuparía el panel desplegado). Todo lo que hay dentro hereda
	   estos dos valores (ver más abajo), así que nada del panel cerrado se puede
	   señalar ni enfocar. */
	opacity: 0;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.nav-lgd.desktop-lgd li.has-drilldown-lgd:hover > .drill-panel-lgd,
.nav-lgd.desktop-lgd li.has-drilldown-lgd:focus-within > .drill-panel-lgd {
	opacity: 1;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateY(0);
}

/* ==========================================================================
   2. COLUMNA IZQUIERDA (2º nivel)
   ========================================================================== */
/*
 * Todo lo que hay dentro del panel sigue la visibilidad y los pointer-events del
 * panel (inherit), nunca valores propios: así se impone a lo que el tema ponga a
 * sus .sub-menu sin que el panel cerrado siga capturando el ratón.
 */
.nav-lgd .drill-rail-lgd,
.nav-lgd .drill-stage-lgd {
	visibility: inherit !important;
	pointer-events: inherit !important;
}

.nav-lgd .drill-rail-lgd {
	display: block !important;
	position: static !important;
	width: var(--lgdmm-rail-w, 250px) !important;
	flex: 0 0 var(--lgdmm-rail-w, 250px) !important;
	max-height: calc(100vh - 160px) !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 !important;
	padding: 14px 10px !important;
	border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
	background: rgba(0, 0, 0, 0.02) !important;
}

.nav-lgd .drill-rail-list-lgd {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px;
	position: static !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: inherit !important;
	pointer-events: inherit !important;
	transform: none !important;
}

.nav-lgd .drill-rail-list-lgd > li {
	display: block !important;
	position: static !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.nav-lgd .drill-rail-list-lgd > li > a {
	display: block !important;
	width: auto !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	font-size: .88em;
	line-height: 1.3;
	color: var(--lgdmm-ink, #1a1a1a) !important;
	background: none !important;
	text-decoration: none !important;
	text-align: left !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 0 !important;
	border-radius: 3px;
	transition: background .15s ease, color .15s ease;
}

/* El tema suele añadir subrayados o flechas con pseudoelementos */
.nav-lgd .drill-rail-list-lgd > li > a::before,
.nav-lgd .drill-rail-list-lgd > li > a::after,
.nav-lgd .drill-stage-lgd a::before,
.nav-lgd .drill-stage-lgd a::after {
	display: none !important;
	content: none !important;
}

.nav-lgd .drill-rail-list-lgd > li > a:hover,
.nav-lgd .drill-rail-list-lgd > li > a:focus,
.nav-lgd .drill-rail-list-lgd > li.drill-active-lgd > a {
	background: rgba(0, 0, 0, 0.05) !important;
	color: var(--lgdmm-accent, #0073aa) !important;
}

/* ==========================================================================
   3. BUSCADOR (opcional)
   ========================================================================== */
.nav-lgd .drill-search-lgd {
	position: sticky;
	top: -14px;
	z-index: 2;
	margin: -6px 0 8px !important;
	padding: 6px 2px 8px !important;
	background: var(--lgdmm-bg, #fff);
}

.nav-lgd .drill-search-input-lgd {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	font-size: .85em;
	line-height: 1.3;
	/* Par fondo/tinta propio: legible en paneles claros y oscuros */
	color: var(--lgdmm-ink, #1a1a1a) !important;
	-webkit-text-fill-color: var(--lgdmm-ink, #1a1a1a) !important;
	background: var(--lgdmm-bg, #fff) !important;
	border: 1px solid rgba(0, 0, 0, 0.18) !important;
	border-radius: 3px !important;
	outline: none !important;
	box-shadow: none !important;
}

.nav-lgd .drill-search-input-lgd::placeholder {
	color: var(--lgdmm-ink, #1a1a1a);
	opacity: .55;
}

.nav-lgd .drill-search-input-lgd:focus {
	border-color: var(--lgdmm-accent, #0073aa) !important;
}

.nav-lgd .drill-search-empty-lgd {
	padding: 6px 12px;
	font-size: .85em;
	color: var(--lgdmm-ink, #1a1a1a);
	opacity: .6;
}

/* ==========================================================================
   4. ZONA DERECHA (3er nivel)
   ========================================================================== */
.nav-lgd .drill-stage-lgd {
	display: block !important;
	/* El JS fija min-width/min-height con el tamaño de la rejilla más grande, sin
	   contar el relleno: con el border-box que ponen muchos temas, el escenario
	   saldría más estrecho de lo medido y el panel crecería al cambiar de
	   elemento, saliéndose de la ventana. */
	box-sizing: content-box !important;
	position: relative !important;
	flex: 1 1 auto !important;
	width: auto !important;
	max-height: calc(100vh - 160px) !important;
	overflow: auto;
	overscroll-behavior: contain;
	margin: 0 !important;
	padding: 14px 16px !important;
	float: none !important;
}

/* Las listas de 3er nivel siguen siendo .sub-menu para el tema: hay que
   deshacer su posicionamiento absoluto y su ocultación. */
.nav-lgd .drill-stage-lgd > .drill-sub-lgd {
	display: none;
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: inherit !important;
	transform: none !important;
	transition: none !important;
	pointer-events: inherit !important;
	grid-auto-flow: column;
	grid-auto-columns: var(--lgdmm-col-w, 240px);
	gap: 4px 20px;
}

.nav-lgd .drill-stage-lgd > .drill-sub-lgd.drill-active-lgd {
	display: grid;
}

/* Oculta pero maquetada: permite medir la rejilla más grande una sola vez */
.nav-lgd .drill-stage-lgd > .drill-sub-lgd.drill-measuring-lgd {
	display: grid;
	position: absolute !important;
	visibility: hidden !important;
}

.nav-lgd .drill-stage-lgd > .drill-sub-lgd > li {
	display: block !important;
	position: static !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.nav-lgd .drill-stage-lgd > .drill-sub-lgd > li > a {
	display: block !important;
	width: auto !important;
	padding: 7px 10px !important;
	margin: 0 !important;
	font-size: .85em;
	line-height: 1.3;
	color: var(--lgdmm-ink, #1a1a1a) !important;
	background: none !important;
	text-decoration: none !important;
	text-align: left !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 0 !important;
	border-radius: 3px;
	transition: background .15s ease, color .15s ease;
}

.nav-lgd .drill-stage-lgd > .drill-sub-lgd > li > a:hover,
.nav-lgd .drill-stage-lgd > .drill-sub-lgd > li > a:focus {
	background: rgba(0, 0, 0, 0.05) !important;
	color: var(--lgdmm-accent, #0073aa) !important;
}

/* ==========================================================================
   5. MENÚ MÓVIL DEL TEMA (por debajo del punto de corte)
   Solo con el ajuste «Mostrar el 3er nivel en el menú móvil» (clase
   `mobile-lgd`, que pone el JS). El menú móvil lo sigue gestionando el tema:
   aquí solo se despliega el 3er nivel dentro de su elemento de 2º nivel, y los
   elementos de 2º nivel sin enlace pasan a ser títulos que no cierran el menú.
   El aspecto (colores, tipografía, sangrías) lo pone el tema.
   ========================================================================== */
.nav-lgd.mobile-lgd li.has-drilldown-lgd .sub-menu .sub-menu {
	display: block !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	max-height: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	box-shadow: none !important;
}

.nav-lgd.mobile-lgd li.has-drilldown-lgd > .sub-menu > li.menu-item-has-children > a[href="#"],
.nav-lgd.mobile-lgd li.has-drilldown-lgd > .sub-menu > li.menu-item-has-children > a:not([href]) {
	pointer-events: none;
	cursor: default;
}

/* ==========================================================================
   6. RESERVA OPCIONAL PARA DESPLEGABLES DE 2 NIVELES
   Solo se activa con el ajuste correspondiente (clase `basic-lgd`), pensado
   para temas que no traen ningún estilo de desplegable. Por defecto está
   apagado y estos menús los sigue gobernando el tema.
   ========================================================================== */
.nav-lgd.desktop-lgd.basic-lgd li.menu-item-has-children:not(.has-drilldown-lgd) {
	position: relative !important;
}

.nav-lgd.desktop-lgd.basic-lgd li.menu-item-has-children:not(.has-drilldown-lgd) > .sub-menu {
	display: block !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
	float: none !important;
	min-width: var(--lgdmm-col-w, 240px) !important;
	width: max-content !important;
	max-width: calc(100vw - 48px) !important;
	margin: 0 !important;
	padding: 8px !important;
	list-style: none !important;
	background: var(--lgdmm-bg, #fff) !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	border-radius: 4px !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16) !important;
	z-index: 99999 !important;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.nav-lgd.desktop-lgd.basic-lgd li.menu-item-has-children:not(.has-drilldown-lgd):hover > .sub-menu,
.nav-lgd.desktop-lgd.basic-lgd li.menu-item-has-children:not(.has-drilldown-lgd):focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.nav-lgd.desktop-lgd.basic-lgd li.menu-item-has-children:not(.has-drilldown-lgd) > .sub-menu > li {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.nav-lgd.desktop-lgd.basic-lgd li.menu-item-has-children:not(.has-drilldown-lgd) > .sub-menu > li > a {
	display: block !important;
	width: auto !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	font-size: .88em;
	line-height: 1.3;
	color: var(--lgdmm-ink, #1a1a1a) !important;
	background: none !important;
	text-decoration: none !important;
	text-align: left !important;
	white-space: nowrap;
	border: 0 !important;
	border-radius: 3px;
}

.nav-lgd.desktop-lgd.basic-lgd li.menu-item-has-children:not(.has-drilldown-lgd) > .sub-menu > li > a:hover,
.nav-lgd.desktop-lgd.basic-lgd li.menu-item-has-children:not(.has-drilldown-lgd) > .sub-menu > li > a:focus {
	background: rgba(0, 0, 0, 0.05) !important;
	color: var(--lgdmm-accent, #0073aa) !important;
}