/**
 * NeuronUP Tabs — estilos de frontend.
 *
 * Se apoya en las custom properties de Mai Engine con valores de reserva, para
 * heredar la paleta y el espaciado del tema sin duplicarlos.
 *
 * El hover es deliberadamente pobre: solo color y fondo, nunca borde, relleno
 * ni tamaño. Cualquier cosa que altere la geometría mueve la fila entera y,
 * en cascada, el contenido de debajo.
 *
 * Sobre las transiciones: lo único que se desplaza es un indicador absoluto por
 * navegación, animado con `transform`, que el navegador compone en la GPU sin
 * recalcular el diseño de la página. El resto son `color`, `background-color` y
 * `opacity`, que solo repintan. Ninguna anima propiedades que obliguen a
 * recolocar la página, y la animación de entrada de los paneles solo se activa
 * cuando el visitante cambia de pestaña, nunca en la primera carga: así no
 * retrasa el primer pintado ni la métrica LCP.
 */

.nup-tabs {
	--nup-tabs-accent: var(--color-primary, #00abc7);
	--nup-tabs-on-accent: #fff;
	--nup-tabs-surface: var(--color-white, #fff);
	--nup-tabs-muted: var(--color-alt, rgba(0, 0, 0, 0.05));
	--nup-tabs-hover: rgba(0, 171, 199, 0.08);
	--nup-tabs-border: rgba(0, 0, 0, 0.12);
	--nup-tabs-gap: 0.25rem;
	--nup-tabs-nav-margin: var(--spacing-md, 1.5rem);
	--nup-tabs-bar: 3px;
	--nup-tabs-duration: 240ms;
	--nup-tabs-ease: cubic-bezier(0.4, 0, 0.2, 1);

	display: block;
}

/* El velo del hover sale del acento, para que siga al color del tema. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {

	.nup-tabs {
		--nup-tabs-hover: color-mix(in srgb, var(--nup-tabs-accent) 8%, transparent);
	}
}

/* Navegación ------------------------------------------------------------- */

.nup-tabs__nav {
	position: relative; /* Referencia de posición del indicador. */
	display: flex;
	flex-wrap: nowrap;
	gap: var(--nup-tabs-gap);
	margin: 0 0 var(--nup-tabs-nav-margin);
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.nup-tabs__nav::-webkit-scrollbar {
	display: none;
}

/*
 * `display: flex` en el elemento de lista para que el botón se estire a la
 * altura de la fila. Sin esto cada botón mide lo que mide su contenido, y uno
 * con distintivo queda más alto que sus vecinos: el fondo del hover y la
 * píldora del indicador cambiaban de alto al pasar de una pestaña a otra.
 */
.nup-tabs__nav-item {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nup-tabs__tab {
	position: relative;
	z-index: 1; /* Por encima del indicador. */
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.7em 1.15em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--nup-tabs-duration) var(--nup-tabs-ease),
		background-color var(--nup-tabs-duration) var(--nup-tabs-ease);
}

.nup-tabs__tab:hover {
	color: var(--nup-tabs-accent);
}

/*
 * Mai Engine le pone a cualquier <button> un borde de 2 px y un fondo azul
 * macizo al señalarlo, al enfocarlo y al pulsarlo:
 *   button:hover, button:focus-visible, button:active {
 *     border: 2px solid transparent;
 *     background: var(--button-background-hover, var(--color-primary-dark, …));
 *   }
 * Su selector pesa más que `.nup-tabs__tab`, así que el botón crecía 4 px de
 * alto y de ancho, y en la variante horizontal —la única sin fondo propio al
 * señalar— además se pintaba de azul oscuro. Se anulan las dos cosas, en los
 * tres estados. Cada variante vuelve a poner el fondo que le toca más abajo,
 * con selectores más específicos.
 */
.nup-tabs__tab,
.nup-tabs__tab:hover,
.nup-tabs__tab:focus,
.nup-tabs__tab:focus-visible,
.nup-tabs__tab:active {
	border: 0;
	background-color: transparent;
}

/*
 * Fondo propio del botón sin seleccionar, en cualquier variante. Al contrario
 * que el reseteo de arriba, aquí no hace falta repetir los estados: eso lo
 * necesita él porque parte de `.nup-tabs__tab` a secas, que pierde contra el
 * `button:hover` del tema; este selector pesa más que cualquiera de los suyos,
 * así que gana también señalado, enfocado y pulsado.
 *
 * Deja fuera la pestaña seleccionada: en píldoras e interruptor su fondo lo
 * pinta el indicador, que va por detrás, y taparlo se cargaría el deslizamiento.
 */
.nup-tabs__nav-item > .nup-tabs__tab:not(.is-active) {
	background-color: var(--nup-tabs-tab-bg, transparent);
}

/*
 * El color del texto va en reglas aparte, y no en el bloque de arriba, para no
 * pisar el acento al señalar cuando no hay fondo propio: sin fondo, las dos
 * caen en lo de siempre.
 */
.nup-tabs__nav-item > .nup-tabs__tab:not(.is-active) {
	color: var(--nup-tabs-tab-fg, inherit);
}

.nup-tabs__nav-item > .nup-tabs__tab:not(.is-active):hover {
	color: var(--nup-tabs-tab-fg, var(--nup-tabs-accent));
}

/*
 * Velo al señalar, pero solo cuando hay fondo propio. El truco es el var() sin
 * alternativa: si la variable no existe, la declaración entera se invalida al
 * calcularla y el fondo se queda en su valor inicial, que es el transparente de
 * siempre. Hace falta sobre todo en horizontal, donde la respuesta al ratón era
 * el atenuado y con fondo propio hay que apagarlo: sin esto, señalar una pestaña
 * no haría nada. Píldoras e interruptor traen su propia versión, más específica.
 */
@supports (color: color-mix(in srgb, red 50%, transparent)) {

	.nup-tabs__nav-item > .nup-tabs__tab:not(.is-active):hover {
		background-color: color-mix(in srgb, var(--nup-tabs-accent) 8%, var(--nup-tabs-tab-bg));
	}
}

.nup-tabs__tab:focus-visible {
	outline: 2px solid var(--nup-tabs-accent);
	outline-offset: 2px;
}

/*
 * La caja del distintivo tiene que caber dentro de la línea del título, o sería
 * él quien fija la altura de la pestaña: 0.68em x 1.5 + 0.1em de relleno = 1.12em,
 * por debajo del 1.25em de `line-height` del botón. Así una pestaña con
 * distintivo mide exactamente lo mismo que una sin él.
 */
.nup-tabs__tab-badge {
	display: inline-block;
	padding: 0.05em 0.55em;
	border-radius: 999px;
	/* Si la pestaña tiene color de distintivo propio, el PHP escribe estas variables en línea. */
	background-color: var(--nup-tabs-badge-bg, var(--nup-tabs-accent));
	color: var(--nup-tabs-badge-fg, var(--nup-tabs-on-accent));
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: uppercase;
	transition:
		color var(--nup-tabs-duration) var(--nup-tabs-ease),
		background-color var(--nup-tabs-duration) var(--nup-tabs-ease);
}

/*
 * En la pestaña seleccionada, el color propio para ese estado si lo tiene; si no,
 * el mismo que sin seleccionar. Así un distintivo con un solo color no cambia.
 */
.nup-tabs__tab.is-active .nup-tabs__tab-badge {
	background-color: var(--nup-tabs-badge-active-bg, var(--nup-tabs-badge-bg, var(--nup-tabs-accent)));
	color: var(--nup-tabs-badge-active-fg, var(--nup-tabs-badge-fg, var(--nup-tabs-on-accent)));
}

/* Indicador deslizante ---------------------------------------------------- */

/*
 * Lo crea el JavaScript, así que sin él no aparece y manda el estilo estático
 * de cada variante. Se coloca con propiedades físicas porque las medidas que
 * escribe el JavaScript (con getBoundingClientRect, desde la esquina superior
 * izquierda de la navegación) también lo son.
 */
.nup-tabs__indicator {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: var(--nup-tabs-w, 0);
	height: var(--nup-tabs-h, 0);
	pointer-events: none;
	transform: translate3d(var(--nup-tabs-x, 0), var(--nup-tabs-y, 0), 0);
}

/*
 * La clase la añade el JavaScript tras colocarlo, para que no entre deslizando.
 * `width` y `height` sí recalculan diseño, pero solo el de este elemento
 * absoluto, que no empuja a nada más; el desplazamiento va con `transform`.
 */
.nup-tabs__nav--animated > .nup-tabs__indicator {
	transition:
		transform var(--nup-tabs-duration) var(--nup-tabs-ease),
		width var(--nup-tabs-duration) var(--nup-tabs-ease),
		height var(--nup-tabs-duration) var(--nup-tabs-ease);
}

/* Paneles ---------------------------------------------------------------- */

.nup-tabs__panel[hidden] {
	display: none !important;
}

/*
 * El panel es enfocable (`tabindex="0"`), así que con teclado tiene que verse
 * dónde está el foco. Con ratón `:focus-visible` no se activa y no se ve nada.
 */
.nup-tabs__panel:focus {
	outline: none;
}

.nup-tabs__panel:focus-visible {
	outline: 2px solid var(--nup-tabs-accent);
	outline-offset: 2px;
}

/* El primer nivel es el envoltorio de la pestaña, que aplica sus supports. */
.nup-tabs__panel > *:first-child,
.nup-tabs__panel > .wp-block-neuronup-tab > *:first-child {
	margin-top: 0;
}

.nup-tabs__panel > *:last-child,
.nup-tabs__panel > .wp-block-neuronup-tab > *:last-child {
	margin-bottom: 0;
}

@keyframes nup-tabs-enter {

	from {
		opacity: 0;
		transform: translate3d(0, 6px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/*
 * `is-entering` solo la pone el JavaScript cuando el visitante cambia de
 * pestaña, nunca en la carga inicial.
 */
.nup-tabs__panel.is-entering {
	animation: nup-tabs-enter var(--nup-tabs-duration) var(--nup-tabs-ease);
}

/* Alineación de la navegación -------------------------------------------- */

/*
 * `safe`: si las pestañas no caben, se alinean al inicio. Sin él desbordarían
 * también hacia el lado del inicio, al que no se puede desplazar, y las primeras
 * quedarían cortadas e inalcanzables. La primera declaración es para los
 * navegadores que aún no entienden `safe`.
 */
.nup-tabs--nav-center > .nup-tabs__nav {
	justify-content: center;
	justify-content: safe center;
}

.nup-tabs--nav-right > .nup-tabs__nav {
	justify-content: flex-end;
	justify-content: safe flex-end;
}

.nup-tabs--nav-stretch > .nup-tabs__nav {
	overflow-x: visible;
}

.nup-tabs--nav-stretch > .nup-tabs__nav > .nup-tabs__nav-item {
	flex: 1 1 0;
}

.nup-tabs--nav-stretch > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab {
	width: 100%;
	justify-content: center;
}

/* Variante: horizontal con subrayado ------------------------------------- */

.nup-tabs--horizontal > .nup-tabs__nav {
	gap: 0;
	box-shadow: inset 0 -1px 0 0 var(--nup-tabs-border);
}

/*
 * El atenuado de las pestañas sin seleccionar sale de una variable porque hay
 * que poder apagarlo: `opacity` afecta a todo el botón, así que un fondo propio
 * al 68 % se vería deslavado. El PHP escribe `--nup-tabs-tab-dim: 1` justo
 * cuando hay fondo propio.
 */
.nup-tabs--horizontal > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab {
	opacity: var(--nup-tabs-tab-dim, 0.68);
	/*
	 * `background-color` va en la lista porque esta variante rehace la del botón
	 * para añadir `opacity`, y sin él el fondo propio cambiaría de golpe mientras
	 * todo lo demás se funde. Las tres solo repintan o componen: ninguna recoloca.
	 */
	transition:
		color var(--nup-tabs-duration) var(--nup-tabs-ease),
		background-color var(--nup-tabs-duration) var(--nup-tabs-ease),
		opacity var(--nup-tabs-duration) var(--nup-tabs-ease);
}

.nup-tabs--horizontal > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab:hover,
.nup-tabs--horizontal > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
	opacity: 1;
}

/*
 * Aquí el indicador es una barra, no un fondo, así que el color de la pestaña
 * seleccionada lo lleva el propio botón. Sin color elegido queda transparente,
 * que es como ha estado siempre.
 */
.nup-tabs--horizontal > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
	background-color: var(--nup-tabs-tab-active-bg, transparent);
	color: var(--nup-tabs-tab-active-fg, var(--nup-tabs-accent));
}

/* Por encima del botón: si no, un fondo propio taparía la barra. */
.nup-tabs--horizontal > .nup-tabs__nav > .nup-tabs__indicator {
	z-index: 2;
	top: auto;
	bottom: 0;
	height: var(--nup-tabs-bar);
	border-radius: var(--nup-tabs-bar) var(--nup-tabs-bar) 0 0;
	background-color: var(--nup-tabs-accent);
	transform: translate3d(var(--nup-tabs-x, 0), 0, 0);
}

/* Sin JavaScript no hay indicador: lo marca el propio botón. */
.nup-tabs--horizontal:not(.nup-tabs--indicator) > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
	box-shadow: inset 0 calc(-1 * var(--nup-tabs-bar)) 0 0 var(--nup-tabs-accent);
}

/* Variante: píldoras ------------------------------------------------------ */

.nup-tabs--pills > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab {
	border-radius: 999px;
}

/*
 * El color del texto al señalar se declara aquí, y no solo en la regla genérica,
 * porque esta variante también cambia el fondo en el mismo estado y las dos
 * cosas tienen que resolverse con el mismo peso.
 */
.nup-tabs--pills > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab:not(.is-active):hover {
	background-color: var(--nup-tabs-hover);
	color: var(--nup-tabs-tab-fg, var(--nup-tabs-accent));
}

/*
 * Con fondo propio, el velo del hover se mezcla con él en vez de sustituirlo.
 * Sin fondo propio sale exactamente el mismo velo de antes, porque mezclar el
 * acento al 8 % con `transparent` es justo lo que vale --nup-tabs-hover.
 */
@supports (color: color-mix(in srgb, red 50%, transparent)) {

	.nup-tabs--pills > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab:not(.is-active):hover {
		background-color: color-mix(in srgb, var(--nup-tabs-accent) 8%, var(--nup-tabs-tab-bg, transparent));
	}
}

.nup-tabs--pills > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
	color: var(--nup-tabs-tab-active-fg, var(--nup-tabs-on-accent));
}

.nup-tabs--pills > .nup-tabs__nav > .nup-tabs__indicator {
	border-radius: 999px;
	background-color: var(--nup-tabs-tab-active-bg, var(--nup-tabs-accent));
}

.nup-tabs--pills:not(.nup-tabs--indicator) > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
	background-color: var(--nup-tabs-tab-active-bg, var(--nup-tabs-accent));
}

/*
 * Sobre la píldora activa, el distintivo sin color propio es un velo del tono
 * de su texto: blanco sobre una píldora oscura y oscuro sobre una clara. El
 * velo lo calcula el PHP junto al color, porque depende de él. Es cosa de esta
 * variante: en las demás el distintivo lleva fondo macizo y se lee sobre lo que
 * sea.
 */
.nup-tabs--pills > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active .nup-tabs__tab-badge {
	background-color: var(--nup-tabs-badge-active-bg, var(--nup-tabs-badge-bg, var(--nup-tabs-tab-active-veil, rgba(255, 255, 255, 0.28))));
	color: var(--nup-tabs-badge-active-fg, var(--nup-tabs-badge-fg, var(--nup-tabs-tab-active-fg, var(--nup-tabs-on-accent))));
}

/* Variante: interruptor --------------------------------------------------- */

.nup-tabs--switch > .nup-tabs__nav {
	display: inline-flex;
	width: auto;
	max-width: 100%;
	padding: 0.28rem;
	gap: 0.15rem;
	border-radius: 999px;
	background-color: var(--nup-tabs-muted);
}

.nup-tabs--switch.nup-tabs--nav-center > .nup-tabs__nav {
	display: flex;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/*
 * El interruptor es `inline-flex` y mide lo que su contenido, así que
 * `justify-content` no tiene espacio que repartir: las demás alineaciones
 * también se resuelven moviendo o estirando la caja entera.
 */
.nup-tabs--switch.nup-tabs--nav-right > .nup-tabs__nav {
	display: flex;
	width: fit-content;
	margin-inline-start: auto;
}

.nup-tabs--switch.nup-tabs--nav-stretch > .nup-tabs__nav {
	display: flex;
}

.nup-tabs--switch > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab {
	padding: 0.55em 1.35em;
	border-radius: 999px;
	font-size: 0.95em;
}

.nup-tabs--switch > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab:not(.is-active):hover {
	background-color: var(--nup-tabs-hover);
}

/* Igual que en píldoras: con fondo propio el velo se mezcla, no lo sustituye. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {

	.nup-tabs--switch > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab:not(.is-active):hover {
		background-color: color-mix(in srgb, var(--nup-tabs-accent) 8%, var(--nup-tabs-tab-bg, transparent));
	}
}

.nup-tabs--switch > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
	color: var(--nup-tabs-tab-active-fg, var(--nup-tabs-accent));
}

/* Como en píldoras, el fondo de la seleccionada lo lleva el indicador. */
.nup-tabs--switch > .nup-tabs__nav > .nup-tabs__indicator {
	border-radius: 999px;
	background-color: var(--nup-tabs-tab-active-bg, var(--nup-tabs-surface));
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.16),
		0 2px 8px rgba(0, 0, 0, 0.06);
}

.nup-tabs--switch:not(.nup-tabs--indicator) > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
	background-color: var(--nup-tabs-tab-active-bg, var(--nup-tabs-surface));
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

/* Variante: vertical ------------------------------------------------------ */

@media (min-width: 768px) {

	.nup-tabs--vertical {
		display: grid;
		grid-template-columns: minmax(9rem, 15rem) 1fr;
		gap: var(--spacing-lg, 2rem);
	}

	.nup-tabs--vertical > .nup-tabs__nav {
		display: block;
		margin-bottom: 0;
		overflow: visible;
		/* Propiedad lógica: en árabe la columna de pestañas va a la derecha. */
		border-inline-end: 1px solid var(--nup-tabs-border);
	}

	.nup-tabs--vertical > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab {
		width: 100%;
		justify-content: flex-start;
		text-align: start;
		white-space: normal;
	}

	/* Como en horizontal: el indicador es una barra, el fondo va en el botón. */
	.nup-tabs--vertical > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
		background-color: var(--nup-tabs-tab-active-bg, transparent);
		color: var(--nup-tabs-tab-active-fg, var(--nup-tabs-accent));
	}

	.nup-tabs--vertical > .nup-tabs__nav > .nup-tabs__indicator {
		z-index: 2;
		top: 0;
		left: auto;
		inset-inline-end: 0;
		width: var(--nup-tabs-bar);
		border-radius: var(--nup-tabs-bar);
		background-color: var(--nup-tabs-accent);
		transform: translate3d(0, var(--nup-tabs-y, 0), 0);
	}

	.nup-tabs--vertical:not(.nup-tabs--indicator) > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
		box-shadow: inset calc(-1 * var(--nup-tabs-bar)) 0 0 0 var(--nup-tabs-accent);
	}
}

/*
 * Por debajo de 768 px la vertical se pinta en fila, así que se marca igual que
 * la horizontal. Sin esto no se veía ninguna pestaña activa: todos sus estilos
 * estaban dentro de la consulta de arriba.
 */
@media (max-width: 767.98px) {

	.nup-tabs--vertical > .nup-tabs__nav {
		gap: 0;
		box-shadow: inset 0 -1px 0 0 var(--nup-tabs-border);
	}

	.nup-tabs--vertical > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
		background-color: var(--nup-tabs-tab-active-bg, transparent);
		color: var(--nup-tabs-tab-active-fg, var(--nup-tabs-accent));
	}

	.nup-tabs--vertical > .nup-tabs__nav > .nup-tabs__indicator {
		z-index: 2;
		top: auto;
		bottom: 0;
		height: var(--nup-tabs-bar);
		border-radius: var(--nup-tabs-bar) var(--nup-tabs-bar) 0 0;
		background-color: var(--nup-tabs-accent);
		transform: translate3d(var(--nup-tabs-x, 0), 0, 0);
	}

	.nup-tabs--vertical:not(.nup-tabs--indicator) > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab.is-active {
		box-shadow: inset 0 calc(-1 * var(--nup-tabs-bar)) 0 0 var(--nup-tabs-accent);
	}
}

/* Pestañas anidadas: un punto menos de énfasis que las de fuera ----------- */

.nup-tabs__panel .nup-tabs {
	--nup-tabs-nav-margin: var(--spacing-sm, 1rem);
}

.nup-tabs__panel .nup-tabs > .nup-tabs__nav > .nup-tabs__nav-item > .nup-tabs__tab {
	padding: 0.5em 1em;
	font-size: 0.9em;
}

/* Sin animaciones si el visitante las ha desactivado ---------------------- */

@media (prefers-reduced-motion: reduce) {

	.nup-tabs__tab,
	.nup-tabs__tab-badge,
	.nup-tabs__nav--animated > .nup-tabs__indicator {
		transition: none;
	}

	.nup-tabs__panel.is-entering {
		animation: none;
	}
}