/********************************************************
 * Archivo: layout-video-play.css
 * Por:     Walter Calvo-Canossa
 * Inicio:  2026-02-15.
 * Función: Implemeta los estilos del exhibidor de vídeos
 *          en una página web. El exhibidor muestra un 
 *          botón de arranque personalizado.
 ********************************************************/

/* Contenedor relativo para posicionar el botón encima */
.video-wrapper {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 20px auto;
	cursor: pointer;
	border-radius: 12px;
	overflow: hidden;
	//box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

video {
	width: 100%;
	display: block;
	background-color: #000;
}

/* Estilo del botón de Play */
.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background-color: rgba(52, 76, 114, 0.8);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s, transform 0.2s;
	z-index: 10;
}

/* Triángulo del icono Play */
.play-icon {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 25px solid white;
	margin-left: 5px;
}

.play-button:hover {
	transform: translate(-50%, -50%) scale(1.1);
	background-color: rgba(168, 186, 215, 0.8);
	background-color: #a8bad7;
}

/* Clase para ocultar el botón cuando el video corre */
.hidden {
	opacity: 0;
	pointer-events: none;
}