/**
 * Lengua de Señas Colombiana en los menús (inc/lsc.php, assets/js/lsc.js).
 *
 * Sólo se carga si hay al menos una seña visible. Sólo computador (≥1024 px);
 * en celular no se pinta nada. Todo sale de theme.json: ni un color literal.
 *
 * @package uts
 */

:root {
	/* Lado del video. 140 px se eligió el 30 de septiembre (120 es el mínimo legible). */
	--uts-lsc-lado: 140px;
}

/* --------------------------------------------------------------------------
   El medio (video o GIF) y su pie
   -------------------------------------------------------------------------- */

.uts-lsc-medio {
	position: relative;
	display: block;
	width: var(--uts-lsc-lado);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: calc(var(--wp--custom--radio--base) - 3px);
	background: var(--wp--preset--color--arena);
}

.uts-lsc-medio video,
.uts-lsc-medio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.uts-lsc-pie {
	margin: var(--wp--preset--spacing--30) 2px 0;
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: 12px;
	line-height: 1.3;
	color: var(--wp--preset--color--gris);
	text-align: start;
}

.uts-lsc-pie b {
	font-weight: 700;
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-lsc-chip {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 6px;
	border-radius: var(--wp--custom--radio--pastilla);
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	font: 700 10px/1.6 var(--wp--preset--font-family--raleway);
	letter-spacing: 0.08em;
	vertical-align: middle;
}

/* Con las animaciones detenidas: imagen quieta y ▶ para verla (ratón). */
.uts-lsc-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--wp--preset--color--verde-oscuro) 35%, transparent);
	color: var(--wp--preset--color--blanco);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.uts-lsc-play:hover,
.uts-lsc-play:active {
	background: color-mix(in srgb, var(--wp--preset--color--verde-oscuro) 50%, transparent);
}

/* --------------------------------------------------------------------------
   Tarjeta flotante (opciones sin submenú)
   -------------------------------------------------------------------------- */

.uts-lsc-tarjeta {
	position: fixed;
	z-index: 130;
	box-sizing: border-box;
	width: calc(var(--uts-lsc-lado) + 16px);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--base);
	box-shadow: var(--wp--custom--sombra--panel);
	opacity: 0;
	transform: translateY(-4px);
	visibility: hidden;
	transition:
		opacity var(--wp--custom--transicion--base),
		transform var(--wp--custom--transicion--base),
		visibility 0s linear 180ms;
}

.uts-lsc-tarjeta.esta-visible {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition:
		opacity var(--wp--custom--transicion--base),
		transform var(--wp--custom--transicion--base),
		visibility 0s;
}

/* --------------------------------------------------------------------------
   Columna-visor dentro de los paneles (opciones con submenú)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.uts-menu__panel.tiene-lsc {
		min-height: calc(var(--uts-lsc-lado) + 72px);
	}

	/*
	 * Dónde va la columna de la seña (pruebas con usuarios, 2 oct 2026):
	 * - Menú principal: a la DERECHA del panel. A la izquierda empujaba los
	 *   enlaces unos 230 px y quien bajaba en diagonal desde «Nosotros» salía
	 *   de la opción antes de llegar a ellos; así los enlaces vuelven a quedar
	 *   justo debajo de la opción.
	 * - Barra verde: a la izquierda. Esos paneles se abren hacia la izquierda
	 *   (anclados al borde derecho de su opción), así que los enlaces ya
	 *   quedan bajo la opción y la seña fuera del camino.
	 */
	.uts-menu--principal .uts-menu__panel.tiene-lsc {
		padding-inline-end: calc(var(--uts-lsc-lado) + var(--wp--preset--spacing--70) + var(--wp--preset--spacing--40)) !important;
	}

	.uts-menu--principal .uts-lsc-columna {
		inset-inline-start: auto;
		inset-inline-end: var(--wp--preset--spacing--60);
	}

	.uts-menu--barra .uts-menu__panel.tiene-lsc {
		padding-inline-start: calc(var(--uts-lsc-lado) + var(--wp--preset--spacing--70) + var(--wp--preset--spacing--40)) !important;
	}

	/* Paneles simples (sin columnas): que crezcan con la columna, no que la aprieten. */
	.uts-menu__panel.tiene-lsc:not(.uts-menu__panel--columnas) {
		width: max-content;
		max-width: calc(100vw - 32px);
	}

	/*
	 * En la barra el panel crece hacia la izquierda, anclado al borde derecho de
	 * su opción; así Servicios no se sale por la derecha de la pantalla.
	 */
	.uts-menu--barra .uts-menu__panel.tiene-lsc {
		left: auto;
		right: 0;
	}
}

.uts-lsc-columna {
	position: absolute;
	top: var(--wp--preset--spacing--50);
	inset-inline-start: var(--wp--preset--spacing--60);
	width: var(--uts-lsc-lado);
	list-style: none;
	margin: 0;
	padding: 0;
}

.uts-lsc-columna .uts-lsc-medio {
	transition: opacity 120ms ease;
}

.uts-lsc-columna.cambiando .uts-lsc-medio {
	opacity: 0.35;
}

/* Panel sin seña de la opción: una pista mientras se elige un enlace. */
.uts-lsc-pista {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--uts-lsc-lado);
	aspect-ratio: 1;
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--custom--traza--control);
	border-radius: calc(var(--wp--custom--radio--base) - 3px);
	background: var(--wp--preset--color--papel);
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: 12px;
	line-height: 1.35;
	color: var(--wp--preset--color--gris);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Sólo computador
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {

	.uts-lsc-tarjeta,
	.uts-lsc-columna {
		display: none !important;
	}
}

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

	.uts-lsc-tarjeta,
	.uts-lsc-tarjeta.esta-visible,
	.uts-lsc-columna .uts-lsc-medio {
		transition: none;
	}

	.uts-lsc-tarjeta {
		transform: none;
	}
}