/* ===========================
   PLAYER OPCION 7 (independiente)
=========================== */

#op7-player{
	width:100%;
	height:100%;
	background:#000;
	position:relative;
	border-radius:8px;
	overflow:hidden;
}

#op7-player video{
	width:100%;
	height:100%;
	display:block;
	background:#000;
	object-fit:contain;
}

#op7-player .op7-controls{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:10px 12px;
	background:linear-gradient(transparent, rgba(0,0,0,.85));
	display:flex;
	align-items:center;
	gap:8px;
	box-sizing:border-box;
}

#op7-player .op7-btn{
	width:40px;
	height:40px;
	min-width:40px;
	border:0;
	border-radius:50%;
	background:#e50914;
	color:#fff;
	font-size:16px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	flex-shrink:0;
}

#op7-player .op7-seek{
	flex:1 1 auto;
	min-width:0;
	-webkit-appearance:none;
	appearance:none;
	height:4px;
	border-radius:2px;
	background:rgba(255,255,255,.3);
	outline:none;
	cursor:pointer;
}

#op7-player .op7-seek::-webkit-slider-thumb{
	-webkit-appearance:none;
	appearance:none;
	width:14px;
	height:14px;
	border-radius:50%;
	background:#e50914;
	cursor:pointer;
}

#op7-player .op7-seek::-moz-range-thumb{
	width:14px;
	height:14px;
	border:0;
	border-radius:50%;
	background:#e50914;
	cursor:pointer;
}

#op7-player .op7-time{
	color:#fff;
	font-size:12px;
	white-space:nowrap;
	min-width:40px;
	text-align:center;
	flex-shrink:0;
}

/* ---- Overlay unificado: play / loading / error ---- */

#op7-player .op7-overlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:3;
	background:rgba(0,0,0,.35);
	opacity:1;
	transition:opacity .25s ease;
	box-sizing:border-box;
	padding:12px;
}

#op7-player .op7-overlay.op7-state-hidden{
	opacity:0;
	pointer-events:none;
}

#op7-player .op7-overlay-play,
#op7-player .op7-overlay-loading,
#op7-player .op7-overlay-error{
	display:none;
}

#op7-player .op7-overlay.op7-state-play .op7-overlay-play{ display:flex; }
#op7-player .op7-overlay.op7-state-loading .op7-overlay-loading{ display:flex; }
#op7-player .op7-overlay.op7-state-error .op7-overlay-error{ display:flex; }

/* Boton central de play — base movil (mobile first) */

#op7-player .op7-overlay-play{
	width:56px;
	height:56px;
	min-width:56px;
	border:0;
	border-radius:50%;
	background:rgba(229,9,20,.9);
	color:#fff;
	cursor:pointer;
	align-items:center;
	justify-content:center;
	box-shadow:0 4px 18px rgba(0,0,0,.5);
	transition:transform .15s ease, background .15s ease;
	flex-shrink:0;
}

#op7-player .op7-overlay-play:hover{
	background:#e50914;
	transform:scale(1.06);
}

#op7-player .op7-overlay-play-icon{
	font-size:22px;
	line-height:1;
	margin-left:4px;
}

/* Bloque de carga: spinner + mensaje + subtitulo — base movil */

#op7-player .op7-overlay-loading{
	flex-direction:column;
	align-items:center;
	gap:10px;
	padding:0 16px;
	text-align:center;
	max-width:100%;
	box-sizing:border-box;
}

#op7-player .op7-spinner{
	width:38px;
	height:38px;
	border:3px solid rgba(255,255,255,.25);
	border-top-color:#e50914;
	border-radius:50%;
	animation:op7-spin .8s linear infinite;
	flex-shrink:0;
}

/* Tipografia base compartida (color/margen) entre titulo de carga y mensaje de error,
   que reutilizan la misma clase .op7-overlay-text en el HTML. El tamaño de fuente se
   define aparte, con clamp(), segun el contexto (carga vs error) mas abajo. */
#op7-player .op7-overlay-text{
	color:#fff;
	margin:0;
}

/* Titulo de carga: "Preparando el video..." / "Cargando el video..." */
#op7-player .op7-overlay-loading .op7-overlay-text{
	font-size:clamp(1.15rem, 2vw, 1.8rem);
	font-weight:700;
	line-height:1.2;
	text-align:center;
}

/* Bloque de error */

#op7-player .op7-overlay-error{
	flex-direction:column;
	align-items:center;
	gap:10px;
	padding:0 16px;
	text-align:center;
	max-width:100%;
	box-sizing:border-box;
}

#op7-player .op7-overlay-icon-warning{
	font-size:30px;
	line-height:1;
	color:#ffb300;
}

/* Mensaje de error: "No fue posible cargar el video." */
#op7-player .op7-overlay-error .op7-overlay-text{
	font-size:clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight:600;
	line-height:1.35;
	text-align:center;
}

#op7-player .op7-retry-btn{
	margin-top:4px;
	border:0;
	border-radius:22px;
	padding:12px 26px;
	min-height:48px;
	background:#e50914;
	color:#fff;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	box-sizing:border-box;
}

#op7-player .op7-retry-btn:hover{
	background:#ff1f2b;
}

@keyframes op7-spin{
	from{ transform:rotate(0deg); }
	to{ transform:rotate(360deg); }
}

/* ---- Dialogo "Continuar reproduccion" — base movil ---- */

#op7-player .op7-resume-dialog{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:5;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.65);
	padding:16px;
	box-sizing:border-box;
}

#op7-player .op7-resume-box{
	background:#161616;
	border-radius:12px;
	padding:20px 18px;
	width:100%;
	max-width:min(340px, 90%);
	text-align:center;
	box-shadow:0 8px 30px rgba(0,0,0,.6);
	box-sizing:border-box;
}

#op7-player .op7-resume-title{
	color:#fff;
	font-size:clamp(1.1rem, 1.8vw, 1.6rem);
	font-weight:700;
	margin:0 0 18px;
	line-height:1.3;
}

#op7-player .op7-resume-buttons{
	display:flex;
	flex-direction:column;
	gap:10px;
}

#op7-player .op7-resume-btn{
	border:0;
	border-radius:24px;
	padding:12px 18px;
	min-height:48px;
	font-size:clamp(0.95rem, 1.5vw, 1.2rem);
	font-weight:600;
	cursor:pointer;
	box-sizing:border-box;
}

#op7-player .op7-resume-btn-primary{
	background:#e50914;
	color:#fff;
}

#op7-player .op7-resume-btn-primary:hover{
	background:#ff1f2b;
}

#op7-player .op7-resume-btn-secondary{
	background:transparent;
	color:rgba(255,255,255,.85);
	border:1px solid rgba(255,255,255,.3);
}

#op7-player .op7-resume-btn-secondary:hover{
	background:rgba(255,255,255,.08);
}

/* =========================================================
   BREAKPOINTS (mobile-first, min-width) — 480 / 576 / 768 / 992 / 1200
   Nota: ya no controlan tamaño de fuente (eso ahora es fluido via clamp()
   arriba); solo siguen ajustando tamaños de botones, espaciados y layout.
========================================================= */

@media (min-width:480px){

	#op7-player .op7-controls{
		padding:11px 14px;
		gap:9px;
	}

	#op7-player .op7-btn{
		width:42px;
		height:42px;
		min-width:42px;
	}

}

@media (min-width:576px){

	#op7-player .op7-overlay-play{
		width:64px;
		height:64px;
		min-width:64px;
	}

	#op7-player .op7-overlay-play-icon{
		font-size:25px;
	}

	#op7-player .op7-resume-box{
		padding:24px 22px;
	}

	#op7-player .op7-resume-buttons{
		flex-direction:row;
		justify-content:center;
	}

	#op7-player .op7-resume-btn{
		flex:1 1 auto;
	}

}

@media (min-width:768px){

	#op7-player .op7-controls{
		padding:12px 15px;
		gap:10px;
	}

	#op7-player .op7-btn{
		width:44px;
		height:44px;
		min-width:44px;
		font-size:17px;
	}

	#op7-player .op7-seek::-webkit-slider-thumb{
		width:15px;
		height:15px;
	}

	#op7-player .op7-seek::-moz-range-thumb{
		width:15px;
		height:15px;
	}

	#op7-player .op7-time{
		font-size:13px;
		min-width:44px;
	}

	#op7-player .op7-overlay-play{
		width:72px;
		height:72px;
		min-width:72px;
	}

	#op7-player .op7-overlay-play-icon{
		font-size:28px;
	}

}

@media (min-width:992px){

	#op7-player .op7-overlay-loading,
	#op7-player .op7-overlay-error{
		gap:14px;
	}

	#op7-player .op7-spinner{
		width:44px;
		height:44px;
	}

	#op7-player .op7-resume-box{
		max-width:min(380px, 90%);
	}

}

/* ---- Movil horizontal (poca altura): evitar que el overlay se corte ---- */
/* clamp() ya reduce el tamaño de fuente con el viewport, pero en horizontal
   con poca ALTURA lo que hay que compactar es el tamaño de los elementos
   no textuales (boton, spinner, separaciones) y el padding del dialogo. */

@media (max-height:420px) and (orientation:landscape){

	#op7-player .op7-overlay-play{
		width:48px;
		height:48px;
		min-width:48px;
	}

	#op7-player .op7-overlay-play-icon{
		font-size:19px;
	}

	#op7-player .op7-overlay-loading,
	#op7-player .op7-overlay-error{
		gap:6px;
	}

	#op7-player .op7-spinner{
		width:28px;
		height:28px;
	}

	#op7-player .op7-resume-box{
		padding:14px 16px;
	}

}