/* ===========================
   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:12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) 14px;
	background:linear-gradient(transparent, rgba(0,0,0,.85));
	display:flex;
	align-items:center;
	gap:9px;
	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.
========================================================= */

/* =========================================================
   NIVEL "TELEFONO PEQUEÑO" (menor a 400px de viewport)
   Presupuesto de ancho recalculado para garantizar que los 5 botones +
   2 etiquetas de tiempo + barra de progreso NUNCA excedan el ancho del
   contenedor, incluso en los 320px del telefono Android mas angosto:

   5 botones x 34px = 170px
   2 etiquetas de tiempo x 30px = 60px
   7 espacios x 5px = 35px
   padding 8px x 2 lados = 16px
   ---------------------------------
   Total minimo = 281px  ->  deja 39px libres para la barra en un
   telefono de 320px, y mas en cualquiera mas ancho. Nunca da numeros
   negativos, que es lo que causaba el desborde.
========================================================= */
@media (max-width:399px){

	#op7-player .op7-controls{
		padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
		gap:5px;
	}

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

	#op7-player .op7-time{
		min-width:30px;
		font-size:10.5px;
	}

	#op7-player .op7-speed-btn{
		font-size:11px;
	}

	#op7-player .op7-rotate-btn svg{
		width:16px;
		height:16px;
	}

}

@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;
	}

}

/* ---- Boton "Voltear pantalla" (FASE 1: solo Opcion 7) ----
   Solo estilos visuales — el tamaño, borde y espaciado ya los hereda de
   .op7-btn (misma regla que usan play/mute/fullscreen), no se duplican
   aqui para no desalinearlo del resto de los controles. */

#op7-player .op7-rotate-btn{
	background:#FF8A00;
	color:#ffffff;
	box-shadow:0 2px 6px rgba(0,0,0,.35);
	transition:background .15s ease, box-shadow .15s ease, transform .1s ease;
	animation: op7-rotate-pulso 2.2s ease-in-out 4;
}

#op7-player .op7-rotate-btn svg{
	display:block;
}

#op7-player .op7-rotate-btn:hover{
	background:#FF9F1C;
}

#op7-player .op7-rotate-btn:active{
	background:#E67A00;
	transform:scale(.94);
}

#op7-player .op7-rotate-btn:focus-visible{
	outline:2px solid #FFC107;
	outline-offset:2px;
}

/* Estado activo persistente: se mantiene mientras la rotacion siga aplicada
   (la clase la agrega/quita el mismo JS que ya existia, sin cambios). */
#op7-player .op7-rotate-btn.op7-rotate-activo{
	background:#FFC107;
	color:#1b1b1b;
	box-shadow:0 0 0 2px rgba(255,193,7,.45), 0 2px 6px rgba(0,0,0,.35);
}

#op7-player .op7-rotate-btn.op7-rotate-activo:hover{
	background:#FFCA28;
}

#op7-player .op7-rotate-btn.op7-rotate-sin-pulso{
	animation:none;
}

@keyframes op7-rotate-pulso{
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(255,138,0,.55);
	}
	50% {
		box-shadow: 0 0 0 7px rgba(255,138,0,0);
	}
}

/* Alternativa sin Screen Orientation API: gira el reproductor visualmente
   dentro del viewport en modo retrato, sin recargar ni afectar el video. */
#op7-player.op7-forzar-horizontal{
	position:fixed !important;
	top:0;
	left:100%;
	width:100vh !important;
	height:100vw !important;
	transform-origin:0 0;
	transform:rotate(90deg);
	z-index:99999;
	border-radius:0;
}

/* ---- Boton "Velocidad de reproduccion" + menu desplegable ---- */

#op7-player .op7-speed-wrap{
	position:relative;
	flex-shrink:0;
}

/* v1.1: mas grande, mas contraste, anillo blanco para que se distinga
   de un vistazo del resto de los botones. */
#op7-player .op7-speed-btn{
	font-size:14px;
	font-weight:800;
	letter-spacing:.3px;
	box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.35);
}

/* v1.2: rediseño completo, no ajuste de pixeles.
   - Ancho: width:max-content en vez de un valor fijo, para que el menu se
     adapte al texto real ("1× (Normal)" es mas largo que "2×"), con un
     minimo de 180px (50% mas que los 120px de la version anterior) y un
     techo de seguridad para no salirse del viewport.
   - Alto de cada opcion: 48px, el tamaño minimo recomendado para que un
     dedo pulse comodo sin errores, en vez de los 36px anteriores. */
/* v1.3: el menu ya NO es descendiente de #op7-player en el DOM (el JS lo
   mueve a <body> al iniciar). #op7-player tiene overflow:hidden -
   necesario para las esquinas redondeadas del video - y cualquier
   descendiente, aunque sea position:absolute, queda recortado por el
   overflow:hidden de un ancestro. Por eso el menu se posiciona con
   position:fixed contra el viewport real, calculado por JS en cada
   apertura, y los selectores ya no dependen de "#op7-player " como
   prefijo — el menu vive fuera de ese arbol. */
#op7-speed-menu{
	position:fixed;
	background:#1b1b1b;
	border:1px solid rgba(255,255,255,.08);
	border-radius:12px;
	padding:8px;
	display:none;
	flex-direction:column;
	gap:3px;
	box-shadow:0 10px 30px rgba(0,0,0,.55);
	z-index:100000;
	width:max-content;
	min-width:180px;
	max-width:calc(100vw - 20px);
	max-height:min(280px, 80vh);
	overflow-y:auto;
}

#op7-speed-menu.op7-speed-visible{
	display:flex;
}

#op7-speed-menu .op7-speed-opcion{
	background:transparent;
	border:0;
	color:#fff;
	text-align:left;
	padding:0 14px;
	border-radius:8px;
	font-size:15px;
	cursor:pointer;
	min-height:48px;
	display:flex;
	align-items:center;
	white-space:nowrap;
}

#op7-speed-menu .op7-speed-opcion:hover{
	background:rgba(255,255,255,.1);
}

#op7-speed-menu .op7-speed-opcion.op7-speed-activa{
	background:#e50914;
	font-weight:700;
}