/*****************************************************
CSS/HELP_MODAL.CSS — Visor de los videos de ayuda (2026-09-02, Dora)

Módulo propio (prefijo hlp-), compartido por las TRES pantallas que
abren un video de ayuda: los dos pasos del registro, el selector del
encuestador y la pestaña Ajustes ▸ Capacitación. El HTML lo inyecta
js/help_modal.js.

EL VIDEO OCUPA EL 80% DE LA PANTALLA (2026-09-02, Dora), centrado sobre
un fondo oscuro que cubre el resto: se ve que hay una página detrás,
pero queda claro que está bloqueada. El overlay sí cubre la ventana
ENTERA — es lo que impide pulsar nada de atrás mientras el video está
abierto.

SOLO SE CIERRA CON LA "X". No cierra al pulsar el fondo: con un video de
varios minutos, un clic fuera mientras se busca el control de volumen
cerraría la ayuda a media explicación.
*****************************************************/

.hlp-overlay{

	/* fixed + inset: cubre la ventana ENTERA, no el alto del documento.
	   En el selector del encuestador el modal vive dentro del iframe del
	   shell, que ocupa toda la ventana, así que el efecto es el mismo. */
	position: fixed;
	inset: 0;

	/* Por encima de todo lo demás: los overlays del proyecto (mensajes
	   directos, conexión) usan valores de 9000 para arriba. */
	z-index: 100000;

	display: none;

	align-items: center;
	justify-content: center;

	/* Oscuro, no negro puro: deja intuir la pantalla de atrás sin que
	   compita con el video. Es el mismo recurso de los demás modales de
	   la app, subido de opacidad porque aquí lo de delante es un video. */
	background: rgba(0, 0, 0, .82);
}

.hlp-overlay.hlp-abierto{
	display: flex;
}

/* La caja del video: 80% de la ventana. Es `relative` para que la X se
   ancle a ELLA y no al borde del navegador. */
.hlp-caja{
	position: relative;
	width: 80vw;
	height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/* `contain`: el video cabe entero dentro de la caja sin recortarse ni
   deformarse, con bandas negras si su proporción no es la de la caja. */
.hlp-video{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000;
	outline: none;
}

/*****************************************
Botón de cerrar. Va FLOTANDO sobre el video, en la esquina superior
derecha DE LA CAJA, con su propio fondo: sobre un fotograma claro una
"X" blanca sin fondo desaparecería.
*****************************************/
.hlp-cerrar{

	position: absolute;
	top: 12px;
	right: 12px;

	z-index: 2;

	width: 44px;
	height: 44px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;

	background: rgba(0, 0, 0, .55);

	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	line-height: 1;

	cursor: pointer;

	transition: background .15s, border-color .15s;
}

.hlp-cerrar:hover{
	background: rgba(0, 0, 0, .85);
	border-color: #fff;
}

/* Mientras el modal está abierto, la página de detrás no se desplaza:
   la rueda del ratón sobre el video movería el formulario del registro
   sin que se vea. */
body.hlp-sin-scroll{
	overflow: hidden;
}