/**
 * Dropdown & Submenus System
 * Sistema unificado de dropdowns y submenús N niveles (hornav + nav-user)
 */

/* ============================================================
   DROPDOWN PRINCIPAL DEL USUARIO
   ============================================================ */
#nav-actions .nav-dropdown {
	position: relative;
}
#nav-actions .nav-dropdown-menu {
	position: absolute;
	top: calc(100% + 13px);
	right: 0;
	min-width: 240px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12), 0 4px 10px rgba(17, 24, 39, 0.06);
	padding: 6px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
#nav-actions .nav-dropdown:hover .nav-dropdown-menu,
#nav-actions .nav-dropdown:focus-within .nav-dropdown-menu,
#nav-actions .nav-dropdown.is-open .nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Puente hacia el dropdown: solo con .nav-dropdown-bridge-armed (ver dropdown.js) */
#nav-actions .nav-dropdown::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height: 0;
	pointer-events: none;
}
#nav-actions .nav-dropdown.nav-dropdown-bridge-armed::after {
	height: 12px;
	pointer-events: auto;
}

/* Cabecera del dropdown (nombre de usuario) */
#nav-actions .nav-dropdown-header {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px 8px;
}
#nav-actions .nav-dropdown-header-label {
	font-size: 11px;
	font-weight: 500;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
#nav-actions .nav-dropdown-header-name {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	word-break: break-word;
}

#nav-actions .nav-dropdown-divider {
	height: 1px;
	margin: 4px 4px;
	background: #f3f4f6;
}

/* ============================================================
   ITEMS DEL DROPDOWN (base común)
   ============================================================ */
#nav-actions .nav-dropdown-item {
	display: flex;
	align-items: center;
	min-height: 40px;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 6px;
	color: #374151;
	font-size: 13px;
	font-weight: 500;
	/* Misma caja de texto que el hornav: evita que otras hojas (K2, items, módulos)
	   alteren line-height o el modelo de caja y dejen la fila de idiomas más alta. */
	line-height: 1.3;
	box-sizing: border-box;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
	position: relative;
}
#nav-actions .nav-dropdown-item:hover,
#nav-actions .nav-dropdown-item:focus-visible {
	background: #f3f4f6;
	color: #0d6efd;
	outline: none;
}
#nav-actions .nav-dropdown-item.is-active {
	background: #eff6ff;
	color: #0d6efd;
	font-weight: 600;
}
#nav-actions .nav-dropdown-item-icon {
	color: #6b7280;
	flex-shrink: 0;
	transition: color 0.12s;
}
#nav-actions .nav-dropdown-item:hover .nav-dropdown-item-icon {
	color: #0d6efd;
}
#nav-actions .nav-dropdown-item > span:not(.nav-lang-code):not(.nav-lang-label):not(.nav-dropdown-item-meta) {
	flex: 1;
}

/* ============================================================
   ITEM CON SUBMENU (idiomas, posibles futuros N niveles)
   ============================================================ */
#nav-actions .nav-dropdown-item-has-submenu {
	padding-right: 30px;
}
#nav-actions .nav-dropdown-item-meta {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	color: #9ca3af;
	letter-spacing: 0.5px;
	padding: 2px 6px;
	background: #f3f4f6;
	border-radius: 4px;
}
#nav-actions .nav-dropdown-item:hover > .nav-dropdown-item-meta {
	background-color: white;
	color: #0d6efd;
}
#nav-actions .nav-dropdown-submenu-arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	transition: color 0.12s, transform 0.15s;
}
#nav-actions .nav-dropdown-item-has-submenu:hover .nav-dropdown-submenu-arrow {
	color: #0d6efd;
}

/* Submenu lateral (flyout hacia la derecha por defecto) */
#nav-actions .nav-dropdown-submenu {
	position: absolute;
	top: -6px;
	left: 100%;
	margin-left: 6px;
	min-width: 200px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12), 0 4px 10px rgba(17, 24, 39, 0.06);
	padding: 6px;
	z-index: 1001;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
#nav-actions .nav-dropdown-item-has-submenu:hover .nav-dropdown-submenu,
#nav-actions .nav-dropdown-item-has-submenu:focus-within .nav-dropdown-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
/* Puente invisible entre el item "Idiomas" y su submenu lateral */
#nav-actions .nav-dropdown-item-has-submenu::before {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 8px;
	height: 100%;
}

/* Variante: submenu invertido hacia la izquierda (cuando no hay espacio a la derecha) */
#nav-actions .nav-dropdown-item-has-submenu.submenu-flip-left .nav-dropdown-submenu {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 6px;
	transform: translateX(6px);
}
#nav-actions .nav-dropdown-item-has-submenu.submenu-flip-left:hover .nav-dropdown-submenu,
#nav-actions .nav-dropdown-item-has-submenu.submenu-flip-left:focus-within .nav-dropdown-submenu {
	transform: translateX(0);
}
#nav-actions .nav-dropdown-item-has-submenu.submenu-flip-left::before {
	left: auto;
	right: 100%;
}

/* Idiomas dentro del submenu */
#nav-actions .nav-lang-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	width: 28px;
	height: 20px;
	padding: 0 6px;
	font-weight: 700;
	color: #6b7280;
	font-size: 10px;
	letter-spacing: 0.5px;
	background: #f3f4f6;
	border-radius: 4px;
	flex-shrink: 0;
	overflow: hidden;
	box-sizing: border-box;
}
#nav-actions .nav-dropdown-item.is-active > .nav-lang-code {
	color: #0d6efd;
	background-color: white;
}
#nav-actions .nav-dropdown-item:hover > .nav-lang-code {
	color: #0d6efd;
	background-color: white;
}
#nav-actions .nav-lang-label {
	color: inherit;
	flex: 1;
	white-space: nowrap;
}
#nav-actions .nav-dropdown-submenu .nav-dropdown-item {
	white-space: nowrap;
}
#nav-actions .nav-dropdown-submenu {
	width: max-content;
	max-width: min(360px, calc(100vw - 32px));
}

/* Formulario de logout */
#nav-actions .nav-dropdown-form {
	margin: 0;
	padding: 0;
	display: block;
}
#nav-actions .nav-dropdown-item-button {
	width: 100%;
	min-height: 40px;
	border: none;
	background: transparent;
	font-family: inherit;
	text-align: left;
	box-shadow: none !important;
	outline: none;
	line-height: normal;
	cursor: pointer;
}
#nav-actions .nav-dropdown-item-button:hover,
#nav-actions .nav-dropdown-item-button:focus {
	box-shadow: none !important;
}
#nav-actions .nav-dropdown-item-danger {
	color: #b91c1c;
}
#nav-actions .nav-dropdown-item-danger .nav-dropdown-item-icon {
	color: #b91c1c;
}
#nav-actions .nav-dropdown-item-danger:hover,
#nav-actions .nav-dropdown-item-danger:focus {
	background: #fef2f2 !important;
	color: #b91c1c !important;
}
#nav-actions .nav-dropdown-item-danger:hover .nav-dropdown-item-icon {
	color: #b91c1c;
}

/* ============================================================
   SUBMENÚS DEL MENÚ HORIZONTAL (hornav #ja-mainnav)
   Unificados con el mismo estilo que el dropdown de usuario
   ============================================================ */

/* 2º nivel: desplegables modernos */
#ja-mainnav ul.menu li ul {
	border: 1px solid #e5e7eb !important;
	background: #ffffff !important;
	border-radius: 10px;
	box-shadow: 0 10px 25px rgba(17, 24, 39, 0.10), 0 4px 10px rgba(17, 24, 39, 0.05);
	padding: 6px;
	margin-top: 2px;
	min-width: 220px;
}

/* 3º nivel y superiores: solo reset del margin-top.
   El posicionamiento (left/top) se aplica en :hover desde ja-sosdmenu.css. */
#ja-mainnav ul.menu li li ul {
	margin-top: 0;
}

/* Puente invisible para no perder hover entre padre e hijo (2º->3º, 3º->4º...).
   Cubre exactamente la altura del LI padre; el submenú abre a top: 0 con el
   padding del UL haciendo de "respiro" vertical. */
#ja-mainnav ul.menu li li.havesubchild::before,
#ja-mainnav ul.menu li li.havesubchild-active::before,
#ja-mainnav ul.menu li li.parent::before,
#ja-mainnav ul.menu li li.parent-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 8px;
	height: 100%;
	z-index: 1;
}


/* Items de submenú con alto consistente (40px) */
#ja-mainnav ul.menu li ul li {
	border: none !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#ja-mainnav ul.menu li ul a {
	border: none !important;
	border-bottom: none !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	min-height: 40px;
	background: none !important;
	color: #374151 !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	border-radius: 6px !important;
	display: flex !important;
	align-items: center !important;
	transition: background 0.12s, color 0.12s !important;
	width: 100%;
	box-sizing: border-box;
}

#ja-mainnav ul.menu li.havesubchild,
#ja-mainnav ul.menu li.havesubchild-active,
#ja-mainnav ul.menu li.parent,
#ja-mainnav ul.menu li.parent-active {
	background: none !important;
	position: relative;
}

/* Flecha indicadora de submenú (chevron) */
#ja-mainnav ul.menu li ul li.havesubchild > a::after,
#ja-mainnav ul.menu li ul li.havesubchild-active > a::after,
#ja-mainnav ul.menu li ul li.parent > a::after,
#ja-mainnav ul.menu li ul li.parent-active > a::after {
	content: "›";
	position: absolute;
	right: 12px;
	font-size: 18px;
	font-weight: 700;
	color: #9ca3af;
	transition: color 0.12s;
}

#ja-mainnav ul.menu li ul a:hover,
#ja-mainnav ul.menu li ul a:active,
#ja-mainnav ul.menu li ul a:focus {
	background: #f3f4f6 !important;
	color: #0d6efd !important;
	border-bottom: none !important;
}

#ja-mainnav ul.menu li ul li.havesubchild > a:hover::after,
#ja-mainnav ul.menu li ul li.havesubchild-active > a:hover::after,
#ja-mainnav ul.menu li ul li.parent > a:hover::after,
#ja-mainnav ul.menu li ul li.parent-active > a:hover::after,
#ja-mainnav ul.menu li ul li.havesubchild > a:focus::after,
#ja-mainnav ul.menu li ul li.havesubchild-active > a:focus::after,
#ja-mainnav ul.menu li ul li.parent > a:focus::after,
#ja-mainnav ul.menu li ul li.parent-active > a:focus::after {
	color: #0d6efd;
}

#ja-mainnav ul.menu ul li.active > a,
#ja-mainnav ul.menu ul li.active > a:hover,
#ja-mainnav ul.menu ul li.active > a:active,
#ja-mainnav ul.menu ul li.active > a:focus {
	background: #eff6ff !important;
	color: #0d6efd !important;
	font-weight: 600 !important;
	border-bottom: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
	#nav-actions .nav-dropdown-menu {
		min-width: 200px;
	}
	#ja-mainnav ul.menu li ul {
		min-width: 180px;
	}
}