/* Reproductor MiplayTV: negro, pantalla completa, sin controles. */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
	width: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
	cursor: none; /* Oculta el cursor en modo kiosk. */
}

.tvplay-player { position: fixed; inset: 0; background: #000; }

#tvplay-stage { position: fixed; inset: 0; background: #000; overflow: hidden; }

.tvplay-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;   /* Cambia a 'cover' si prefieres llenar sin barras. */
	background: #000;
	opacity: 0;
	transition: opacity 120ms linear;
	will-change: opacity;
	pointer-events: none;
}

.tvplay-video.is-active { opacity: 1; }

/* Oculta los controles y el botón de play que el navegador/WebView dibuja sobre
   un <video> en pausa o cargando (el círculo con triángulo entre video y video). */
.tvplay-video::-webkit-media-controls,
.tvplay-video::-webkit-media-controls-enclosure,
.tvplay-video::-webkit-media-controls-panel,
.tvplay-video::-webkit-media-controls-overlay-play-button,
.tvplay-video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none !important;
	opacity: 0 !important;
}

/* Capa de estado (oculta durante reproducción normal). */
.tvplay-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: #444;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: 2vh;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: 1;
	transition: opacity 300ms ease;
	z-index: 10;
}

.tvplay-overlay.is-hidden { opacity: 0; pointer-events: none; }

.tvplay-overlay-inner { text-align: center; }

/* Aviso discreto de sonido (esquina inferior). Oculto salvo que el audio quede bloqueado. */
.tvplay-sound-hint {
	position: fixed;
	bottom: 4vh;
	right: 4vh;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: 1.8vh;
	padding: .8vh 1.6vh;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
	z-index: 20;
}
.tvplay-sound-hint.is-visible { opacity: 1; transform: translateY(0); }

/* Imágenes (1.8): fundido de entrada/salida y un movimiento lento distinto en cada una.
   La duración de la animación la fija player.js con la duración de la imagen (20 s).
   La imagen que sale conserva su movimiento mientras se desvanece (sin saltos). */
.tvplay-image {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	opacity: 0;
	z-index: 2;
	-webkit-transition: opacity 1.2s ease;
	transition: opacity 1.2s ease;
	pointer-events: none;
	will-change: opacity, transform;
}
.tvplay-image.is-active { opacity: 1; z-index: 3; }
.tvplay-image.fx-zoom-in    { -webkit-animation: tvp-zoom-in linear forwards;    animation: tvp-zoom-in linear forwards; }
.tvplay-image.fx-zoom-out   { -webkit-animation: tvp-zoom-out linear forwards;   animation: tvp-zoom-out linear forwards; }
.tvplay-image.fx-pan-left   { -webkit-animation: tvp-pan-left linear forwards;   animation: tvp-pan-left linear forwards; }
.tvplay-image.fx-pan-up     { -webkit-animation: tvp-pan-up linear forwards;     animation: tvp-pan-up linear forwards; }
.tvplay-image.fx-slide-left { -webkit-animation: tvp-slide-left ease-out forwards; animation: tvp-slide-left ease-out forwards; }
.tvplay-image.fx-slide-up   { -webkit-animation: tvp-slide-up ease-out forwards;   animation: tvp-slide-up ease-out forwards; }

@-webkit-keyframes tvp-zoom-in { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.08); } }
@keyframes tvp-zoom-in { from { transform: scale(1); } to { transform: scale(1.08); } }
@-webkit-keyframes tvp-zoom-out { from { -webkit-transform: scale(1.08); } to { -webkit-transform: scale(1); } }
@keyframes tvp-zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }
@-webkit-keyframes tvp-pan-left { from { -webkit-transform: scale(1.07) translateX(2%); } to { -webkit-transform: scale(1.07) translateX(-2%); } }
@keyframes tvp-pan-left { from { transform: scale(1.07) translateX(2%); } to { transform: scale(1.07) translateX(-2%); } }
@-webkit-keyframes tvp-pan-up { from { -webkit-transform: scale(1.07) translateY(2%); } to { -webkit-transform: scale(1.07) translateY(-2%); } }
@keyframes tvp-pan-up { from { transform: scale(1.07) translateY(2%); } to { transform: scale(1.07) translateY(-2%); } }
/* Deslizamiento: entra desde un lado en el primer ~1.2 s y luego deriva muy lento. */
@-webkit-keyframes tvp-slide-left { 0% { -webkit-transform: translateX(8%) scale(1.04); } 6% { -webkit-transform: translateX(0) scale(1.04); } 100% { -webkit-transform: translateX(-1.5%) scale(1.04); } }
@keyframes tvp-slide-left { 0% { transform: translateX(8%) scale(1.04); } 6% { transform: translateX(0) scale(1.04); } 100% { transform: translateX(-1.5%) scale(1.04); } }
@-webkit-keyframes tvp-slide-up { 0% { -webkit-transform: translateY(8%) scale(1.04); } 6% { -webkit-transform: translateY(0) scale(1.04); } 100% { -webkit-transform: translateY(-1.5%) scale(1.04); } }
@keyframes tvp-slide-up { 0% { transform: translateY(8%) scale(1.04); } 6% { transform: translateY(0) scale(1.04); } 100% { transform: translateY(-1.5%) scale(1.04); } }