/**
 * Estilos para el Menú Jerárquico Reinpe.
 *
 * @package Reinpe_Funcionalidades
 */

.reinpe-menu-hierarchical-wrapper {
	width: 100%;
	background-color: var(--reinpe-menu-bg, #ffffff);
	border-top: var(--reinpe-menu-border-top-width, 1px) var(--reinpe-menu-border-top-style, solid) var(--reinpe-menu-border-top-color, #e4e9f2);
	border-bottom: var(--reinpe-menu-border-bottom-width, 1px) var(--reinpe-menu-border-bottom-style, solid) var(--reinpe-menu-border-bottom-color, #e4e9f2);
	margin: var(--reinpe-menu-margin, 0px);
	box-sizing: border-box;
}

/* Comportamiento Sticky */
.reinpe-menu-hierarchical-wrapper.is-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--reinpe-menu-sticky-offset, 0px);
	z-index: 999;
}

/* Compensar la barra de administración de WordPress si está presente */
.admin-bar .reinpe-menu-hierarchical-wrapper.is-sticky {
	top: calc(var(--reinpe-menu-sticky-offset, 0px) + 32px);
}

@media (max-width: 782px) {
	.admin-bar .reinpe-menu-hierarchical-wrapper.is-sticky {
		top: calc(var(--reinpe-menu-sticky-offset, 0px) + 46px);
	}
}

.reinpe-menu-hierarchical-inner {
	max-width: var(--reinpe-menu-max-width, 1200px);
	margin: 0 auto;
	padding: var(--reinpe-menu-padding, 0px);
	box-sizing: border-box;
	display: flex;
	justify-content: var(--reinpe-menu-alignment, center);
}

.reinpe-menu-hierarchical-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: var(--reinpe-menu-items-gap, 32px);
	justify-content: var(--reinpe-menu-alignment, center);
	width: 100%;
	height: 74px;
}

.reinpe-menu-hierarchical-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
}

.reinpe-menu-hierarchical-link {
	display: flex;
	align-items: center;
	gap: var(--reinpe-menu-item-icon-gap, 8px);
	padding: var(--reinpe-menu-item-padding, 16px 20px);
	text-decoration: none !important;
	color: var(--reinpe-menu-text-color, #8a99ad);
	transition: color 0.3s ease, background-color 0.3s ease;
	border-radius: var(--reinpe-menu-item-radius, 0px);
	background-color: var(--reinpe-menu-item-bg, transparent);
	box-sizing: border-box;
}

.reinpe-menu-hierarchical-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--reinpe-menu-icon-color, #8a99ad);
	width: var(--reinpe-menu-icon-size, 20px);
	height: var(--reinpe-menu-icon-size, 20px);
	font-size: var(--reinpe-menu-icon-size, 20px);
	transition: color 0.3s ease;
}

.reinpe-menu-hierarchical-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	transition: fill 0.3s ease;
}

.reinpe-menu-hierarchical-text {
	font-family: var(--reinpe-menu-font-family, inherit);
	font-size: var(--reinpe-menu-font-size, 16px);
	font-weight: var(--reinpe-menu-font-weight, 500);
	line-height: 1.2;
	transition: color 0.3s ease;
}

/* Estado Hover */
.reinpe-menu-hierarchical-link:hover {
	color: var(--reinpe-menu-text-color-hover, #0065fe);
}

.reinpe-menu-hierarchical-link:hover .reinpe-menu-hierarchical-icon {
	color: var(--reinpe-menu-icon-color-hover, #0065fe);
}

/* Estado Activo */
.reinpe-menu-hierarchical-item.active .reinpe-menu-hierarchical-link {
	color: var(--reinpe-menu-text-color-active, #0065fe);
	background-color: var(--reinpe-menu-item-bg-active, transparent);
}

.reinpe-menu-hierarchical-item.active .reinpe-menu-hierarchical-icon {
	color: var(--reinpe-menu-icon-color-active, #0065fe);
}

/* Línea de Subrayado Activa */
.reinpe-menu-hierarchical-item.active::after {
	content: '';
	position: absolute;
	bottom: var(--reinpe-menu-underline-offset, 0px);
	left: 0;
	width: 100%;
	height: var(--reinpe-menu-underline-height, 3px);
	background-color: var(--reinpe-menu-underline-color, #0065fe);
	border-radius: var(--reinpe-menu-underline-radius, 2px 2px 0 0);
	z-index: 1;
}

/* Aviso de configuración vacía en el editor */
.reinpe-menu-hierarchical-empty-notice {
	padding: 20px;
	border: 1px dashed #cccccc;
	text-align: center;
	color: #666666;
	background: #fafafa;
	border-radius: 4px;
	font-family: sans-serif;
	font-size: 14px;
	width: 100%;
}

/* Scroll horizontal cuando los elementos no caben (desktop y móvil) */
.reinpe-menu-hierarchical-wrapper {
	position: relative;
	/* Necesario para posicionar los fades */
}

.reinpe-menu-hierarchical-inner {
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Ocultar barra en Firefox */
}

.reinpe-menu-hierarchical-inner::-webkit-scrollbar {
	display: none;
	/* Ocultar barra en Chrome/Safari */
}

.reinpe-menu-hierarchical-list {
	flex-wrap: nowrap !important;
	width: auto !important;
}

.reinpe-menu-hierarchical-item {
	white-space: nowrap;
	/* Evitar que el texto de un ítem se parta en dos líneas */
}

/* Overlays de desvanecido para indicar scroll lateral */
.reinpe-menu-fade-left,
.reinpe-menu-fade-right {
	display: block;
}

/* Activar opacidad del desvanecido según scroll */
.reinpe-menu-hierarchical-wrapper.has-scroll-left .reinpe-menu-fade-left {
	opacity: 1;
}

.reinpe-menu-hierarchical-wrapper.has-scroll-right .reinpe-menu-fade-right {
	opacity: 1;
}

/* Flechas de navegación tipo slider (desktop)
   ============================================
   Se resetean TODOS los estilos de botón para evitar herencia. */
.reinpe-menu-hierarchical-wrapper button.reinpe-menu-arrow {
	/* Reset total contra estilos globales de botón del tema */
	all: unset !important;
	display: none !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 25 !important;
	box-sizing: border-box !important;
	width: var(--reinpe-arrow-size, 36px) !important;
	height: var(--reinpe-arrow-size, 36px) !important;
	border: var(--reinpe-arrow-border-width, 1px) solid var(--reinpe-arrow-border-color, #e4e9f2) !important;
	border-radius: var(--reinpe-arrow-radius, 50%) !important;
	background-color: var(--reinpe-arrow-bg, #ffffff) !important;
	color: var(--reinpe-arrow-color, #64748b) !important;
	cursor: pointer !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	transition: opacity 0.25s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
	opacity: 0 !important;
	pointer-events: none !important;
	padding: var(--reinpe-arrow-padding, 0px) !important;
	margin: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.reinpe-menu-hierarchical-wrapper button.reinpe-menu-arrow svg {
	display: block !important;
	width: var(--reinpe-arrow-icon-size, 20px) !important;
	height: var(--reinpe-arrow-icon-size, 20px) !important;
	stroke: currentColor !important;
	fill: none !important;
}

.reinpe-menu-hierarchical-wrapper button.reinpe-menu-arrow-left {
	left: 8px !important;
}

.reinpe-menu-hierarchical-wrapper button.reinpe-menu-arrow-right {
	right: 8px !important;
}

.reinpe-menu-hierarchical-wrapper button.reinpe-menu-arrow:hover {
	color: var(--reinpe-arrow-color-hover, #0f172a) !important;
	border-color: var(--reinpe-arrow-border-color-hover, #cbd5e1) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
	background-color: var(--reinpe-arrow-bg-hover, #ffffff) !important;
}

/* En desktop (>=768px), mostrar las flechas y desplazar el contenido del wrapper únicamente cuando haya scroll en esa dirección */
@media (min-width: 768px) {
	.reinpe-menu-hierarchical-wrapper.has-scroll-left button.reinpe-menu-arrow-left {
		display: flex !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	.reinpe-menu-hierarchical-wrapper.has-scroll-right button.reinpe-menu-arrow-right {
		display: flex !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* Separación dinámica del wrapper para que el menú no sea tapado por las flechas */
	.reinpe-menu-hierarchical-wrapper.has-scroll-left {
		padding-left: calc(var(--reinpe-arrow-size, 36px) + 20px) !important;
	}

	.reinpe-menu-hierarchical-wrapper.has-scroll-right {
		padding-right: calc(var(--reinpe-arrow-size, 36px) + 20px) !important;
	}
}

/* Ajustes adicionales para móviles */
@media (max-width: 767px) {
	.reinpe-menu-hierarchical-inner {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* En móvil, ocultar flechas (el swipe es natural) */
	.reinpe-menu-hierarchical-wrapper button.reinpe-menu-arrow {
		display: none !important;
	}
}