/**
 * Vive Video Playlists - Estilos Frontend
 * Temas: Candelaria Oro & Carmesí, Dark Cinema, Luz Moderna
 * Layouts: Vertical Dividido, Horizontal, Grid
 */

/* ==========================================================================
   1. VARIABLES & TEMAS
   ========================================================================== */

.vvp-playlist-block {
	--vvp-primary: #b71c1c;
	--vvp-accent: #d4af37;
	--vvp-bg: #141519;
	--vvp-card-bg: #1e2026;
	--vvp-card-hover: #262831;
	--vvp-active-bg: rgba(212, 175, 55, 0.12);
	--vvp-active-border: #d4af37;
	--vvp-text: #ffffff;
	--vvp-text-muted: #9ba1b0;
	--vvp-border: rgba(255, 255, 255, 0.08);
	--vvp-radius: 10px;
	--vvp-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	margin: 24px 0 36px 0;
	position: relative;
	box-sizing: border-box;
}

.vvp-playlist-block *, .vvp-playlist-block *::before, .vvp-playlist-block *::after {
	box-sizing: border-box;
}

/* Tema: Candelaria Oro & Carmesí */
.vvp-theme-candelaria-gold {
	--vvp-primary: #b71c1c;
	--vvp-accent: #d4af37;
	--vvp-bg: #141519;
	--vvp-card-bg: #1c1d23;
	--vvp-card-hover: #262831;
	--vvp-active-bg: rgba(212, 175, 55, 0.14);
	--vvp-active-border: #d4af37;
	--vvp-text: #ffffff;
	--vvp-text-muted: #a3a8b7;
	--vvp-border: rgba(212, 175, 55, 0.15);
}

/* Tema: Dark Cinema */
.vvp-theme-dark-cinema {
	--vvp-primary: #e50914;
	--vvp-accent: #e50914;
	--vvp-bg: #0b0c0e;
	--vvp-card-bg: #131518;
	--vvp-card-hover: #1b1e23;
	--vvp-active-bg: rgba(229, 9, 20, 0.12);
	--vvp-active-border: #e50914;
	--vvp-text: #ffffff;
	--vvp-text-muted: #88909f;
	--vvp-border: rgba(255, 255, 255, 0.06);
}

/* Tema: Luz Moderna (Light) */
.vvp-theme-light {
	--vvp-primary: #b71c1c;
	--vvp-accent: #d4af37;
	--vvp-bg: #ffffff;
	--vvp-card-bg: #f8f9fa;
	--vvp-card-hover: #edf2f7;
	--vvp-active-bg: #fef9ed;
	--vvp-active-border: #d4af37;
	--vvp-text: #1a202c;
	--vvp-text-muted: #718096;
	--vvp-border: #e2e8f0;
	--vvp-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   2. CONTENEDOR PRINCIPAL & ESTRUCTURA
   ========================================================================== */

.vvp-container {
	background: var(--vvp-bg);
	color: var(--vvp-text);
	border: 1px solid var(--vvp-border);
	border-radius: var(--vvp-radius);
	overflow: hidden;
	box-shadow: var(--vvp-shadow);
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   3. SECCIÓN DEL REPRODUCTOR
   ========================================================================== */

.vvp-player-section {
	position: relative;
	background: #000;
	display: flex;
	flex-direction: column;
}

.vvp-player-aspect {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
	background: #000;
	overflow: hidden;
}

/* Portada / Facade Ultraligero */
.vvp-facade-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: opacity 0.25s ease;
}

.vvp-facade-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
	transition: background 0.3s ease;
}

.vvp-facade-cover:hover .vvp-facade-overlay {
	background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
}

.vvp-big-play-btn {
	position: relative;
	z-index: 6;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vvp-facade-cover:hover .vvp-big-play-btn {
	transform: scale(1.12);
}

.vvp-play-bg {
	fill: var(--vvp-primary);
	transition: fill 0.2s ease;
}

.vvp-facade-cover:hover .vvp-play-bg {
	fill: #e50914;
}

.vvp-facade-caption {
	position: absolute;
	bottom: 16px;
	left: 20px;
	right: 20px;
	z-index: 6;
	pointer-events: none;
}

.vvp-facade-now {
	display: inline-block;
	background: var(--vvp-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 3px 8px;
	border-radius: 3px;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.vvp-facade-title {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-shadow: 0 2px 6px rgba(0,0,0,0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Contenedor Iframe Reutilizable */
.vvp-embed-frame-holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}

.vvp-embed-frame-holder iframe,
.vvp-embed-frame-holder video {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* ==========================================================================
   4. COUNTDOWN OVERLAY PARA AUTOPLAY NEXT
   ========================================================================== */

.vvp-next-countdown-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 11, 14, 0.92);
	backdrop-filter: blur(6px);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: vvpFadeIn 0.3s ease;
}

.vvp-countdown-box {
	text-align: center;
	padding: 24px;
	max-width: 420px;
}

.vvp-countdown-badge {
	display: inline-block;
	background: var(--vvp-accent);
	color: #111;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.vvp-countdown-title {
	color: #fff;
	font-size: 18px;
	margin: 0 0 18px 0;
	line-height: 1.4;
	font-weight: 700;
}

.vvp-countdown-timer {
	position: relative;
	width: 60px;
	height: 60px;
	margin: 0 auto 20px auto;
}

.vvp-timer-svg {
	transform: rotate(-90deg);
}

.vvp-timer-bg {
	fill: none;
	stroke: rgba(255, 255, 255, 0.15);
	stroke-width: 4;
}

.vvp-timer-bar {
	fill: none;
	stroke: var(--vvp-accent);
	stroke-width: 4;
	stroke-dasharray: 163.36;
	stroke-dashoffset: 0;
	stroke-linecap: round;
	transition: stroke-dashoffset 1s linear;
}

.vvp-countdown-sec {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 22px;
	font-weight: 800;
	color: #fff;
}

.vvp-countdown-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.vvp-btn-play-next {
	background: var(--vvp-primary);
	color: #fff;
	border: none;
	padding: 9px 20px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.vvp-btn-play-next:hover {
	filter: brightness(1.15);
}

.vvp-btn-cancel-next {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
	padding: 9px 18px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.vvp-btn-cancel-next:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   5. BARRA DE CONTROLES INFERIOR DEL REPRODUCTOR
   ========================================================================== */

.vvp-controls-bar {
	background: var(--vvp-bg);
	border-top: 1px solid var(--vvp-border);
	padding: 12px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.vvp-controls-info {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 250px;
	min-width: 0;
}

.vvp-current-counter {
	font-size: 12px;
	font-weight: 700;
	color: var(--vvp-accent);
	background: rgba(212, 175, 55, 0.1);
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

.vvp-playing-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--vvp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vvp-controls-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vvp-controls-buttons button {
	background: var(--vvp-card-bg);
	color: var(--vvp-text);
	border: 1px solid var(--vvp-border);
	border-radius: 6px;
	padding: 7px 11px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.vvp-controls-buttons button:hover {
	background: var(--vvp-card-hover);
	border-color: var(--vvp-accent);
	color: var(--vvp-accent);
}

/* Switch Autoplay */
.vvp-btn-toggle-autoplay {
	font-size: 11px;
	font-weight: 700;
	gap: 6px;
	padding: 5px 10px !important;
}

.vvp-toggle-pill {
	display: inline-block;
	width: 24px;
	height: 13px;
	background: #555;
	border-radius: 10px;
	position: relative;
	transition: background 0.2s ease;
}

.vvp-toggle-pill::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 9px;
	height: 9px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.vvp-btn-toggle-autoplay.is-active .vvp-toggle-pill {
	background: var(--vvp-accent);
}

.vvp-btn-toggle-autoplay.is-active .vvp-toggle-pill::after {
	transform: translateX(11px);
}

/* ==========================================================================
   6. SECCIÓN DE NAVEGACIÓN Y LISTA DE VIDEOS
   ========================================================================== */

.vvp-nav-section {
	display: flex;
	flex-direction: column;
	background: var(--vvp-bg);
}

.vvp-nav-head {
	padding: 16px 18px 12px 18px;
	border-bottom: 1px solid var(--vvp-border);
}

.vvp-head-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.vvp-head-icon {
	color: var(--vvp-accent);
	display: flex;
	align-items: center;
}

.vvp-head-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--vvp-text);
	letter-spacing: -0.2px;
}

/* Buscador en tiempo real */
.vvp-search-box {
	position: relative;
	margin-bottom: 10px;
}

.vvp-search-input {
	width: 100%;
	padding: 8px 36px 8px 12px;
	background: var(--vvp-card-bg);
	border: 1px solid var(--vvp-border);
	border-radius: 6px;
	color: var(--vvp-text);
	font-size: 13px;
	outline: none;
	transition: border-color 0.2s ease;
}

.vvp-search-input:focus {
	border-color: var(--vvp-accent);
}

.vvp-search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--vvp-text-muted);
	pointer-events: none;
}

/* Filtro por badges / categorías */
.vvp-badges-filter {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.vvp-badges-filter::-webkit-scrollbar {
	display: none;
}

.vvp-filter-pill {
	background: var(--vvp-card-bg);
	color: var(--vvp-text-muted);
	border: 1px solid var(--vvp-border);
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s ease;
}

.vvp-filter-pill:hover,
.vvp-filter-pill.is-active {
	background: var(--vvp-primary);
	color: #fff;
	border-color: var(--vvp-primary);
}

/* Scroll y Lista */
.vvp-items-scroll {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--vvp-border) transparent;
}

.vvp-items-scroll::-webkit-scrollbar {
	width: 6px;
}

.vvp-items-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.vvp-items-scroll::-webkit-scrollbar-thumb {
	background: var(--vvp-border);
	border-radius: 3px;
}

.vvp-items-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Fila de video en playlist */
.vvp-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--vvp-border);
	cursor: pointer;
	background: transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.vvp-item:last-child {
	border-bottom: none;
}

.vvp-item:hover {
	background: var(--vvp-card-hover);
}

.vvp-item.is-selected {
	background: var(--vvp-active-bg);
	border-left: 3px solid var(--vvp-active-border);
	padding-left: 13px;
}

/* Número e icono de reproducción */
.vvp-item-status {
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.vvp-item-number {
	font-size: 12px;
	font-weight: 700;
	color: var(--vvp-text-muted);
}

.vvp-icon-playing {
	display: none;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	height: 14px;
}

.vvp-item.is-playing .vvp-item-number {
	display: none;
}

.vvp-item.is-playing .vvp-icon-playing {
	display: flex;
}

/* Animación de ondas de sonido */
.vvp-wave {
	width: 3px;
	background: var(--vvp-accent);
	border-radius: 2px;
	animation: vvpWave 0.8s ease-in-out infinite alternate;
}

.vvp-wave:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.vvp-wave:nth-child(2) { height: 14px; animation-delay: 0.3s; }
.vvp-wave:nth-child(3) { height: 9px; animation-delay: 0.2s; }

@keyframes vvpWave {
	0% { height: 3px; }
	100% { height: 14px; }
}

/* Miniatura en lista */
.vvp-item-thumb {
	position: relative;
	width: 100px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
}

.vvp-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

.vvp-item:hover .vvp-item-thumb img {
	transform: scale(1.05);
}

.vvp-item-duration {
	position: absolute;
	bottom: 3px;
	right: 4px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 4px;
	border-radius: 3px;
}

/* Información de video */
.vvp-item-info {
	flex: 1;
	min-width: 0;
}

.vvp-item-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vvp-accent);
	margin-bottom: 2px;
}

.vvp-item-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--vvp-text);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vvp-item.is-selected .vvp-item-title {
	color: var(--vvp-accent);
}

.vvp-no-results {
	padding: 30px 16px;
	text-align: center;
	color: var(--vvp-text-muted);
	font-size: 13px;
}

/* ==========================================================================
   7. LAYOUTS: VERTICAL, HORIZONTAL, GRID
   ========================================================================== */

/* Layout 1: Vertical Dividido (Desktop) */
@media (min-width: 881px) {
	.vvp-layout-vertical .vvp-container {
		flex-direction: row;
	}

	.vvp-layout-vertical .vvp-player-section {
		flex: 1 1 65%;
		border-right: 1px solid var(--vvp-border);
	}

	.vvp-layout-vertical .vvp-nav-section {
		flex: 1 1 35%;
		max-width: 420px;
		max-height: 580px;
	}
}

/* Layout 2: Carrusel Horizontal */
.vvp-layout-horizontal .vvp-container {
	flex-direction: column;
}

.vvp-layout-horizontal .vvp-items-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	padding: 12px 16px;
}

.vvp-layout-horizontal .vvp-items-list {
	display: flex;
	gap: 14px;
}

.vvp-layout-horizontal .vvp-item {
	flex: 0 0 220px;
	flex-direction: column;
	align-items: flex-start;
	background: var(--vvp-card-bg);
	border: 1px solid var(--vvp-border);
	border-radius: 8px;
	padding: 10px;
}

.vvp-layout-horizontal .vvp-item-thumb {
	width: 100%;
	height: 110px;
	margin-bottom: 8px;
}

.vvp-layout-horizontal .vvp-item.is-selected {
	border-color: var(--vvp-accent);
	border-left: 1px solid var(--vvp-accent);
}

/* Layout 3: Cuadrícula / Grid */
.vvp-layout-grid .vvp-container {
	flex-direction: column;
}

.vvp-layout-grid .vvp-items-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
	padding: 16px;
}

.vvp-layout-grid .vvp-item {
	flex-direction: column;
	align-items: flex-start;
	background: var(--vvp-card-bg);
	border: 1px solid var(--vvp-border);
	border-radius: 8px;
	padding: 10px;
}

.vvp-layout-grid .vvp-item-thumb {
	width: 100%;
	height: 120px;
	margin-bottom: 8px;
}

.vvp-layout-grid .vvp-item.is-selected {
	border-color: var(--vvp-accent);
	border-left: 1px solid var(--vvp-accent);
}

/* ==========================================================================
   8. MODO TEATRO / CINE OVERLAY GLOBAL (SOBREPONE TODOS LOS ELEMENTOS)
   ========================================================================== */

/* Bloquea el scroll del fondo cuando el modo cine está activo */
body.vvp-theater-open,
html.vvp-theater-open {
	overflow: hidden !important;
}

/* Rompe las limitaciones de z-index y overflow de Jannah y otros temas en todos los ancestros */
body.vvp-theater-open #tie-wrapper,
body.vvp-theater-open #tie-container,
body.vvp-theater-open .main-content,
body.vvp-theater-open .container-wrapper,
body.vvp-theater-open .container,
body.vvp-theater-open article,
body.vvp-theater-open #the-post,
body.vvp-theater-open .entry-content,
body.vvp-theater-open .post-content {
	z-index: 2147483640 !important;
	transform: none !important;
	filter: none !important;
	contain: none !important;
	perspective: none !important;
	overflow: visible !important;
}

/* Oculta cabeceras fijas, barras de navegación y widgets laterales para que no estorben */
body.vvp-theater-open #theme-header,
body.vvp-theater-open #tie-header,
body.vvp-theater-open .main-nav-wrapper,
body.vvp-theater-open .sticky-wrapper,
body.vvp-theater-open .side-aside,
body.vvp-theater-open .theiaStickySidebar,
body.vvp-theater-open .share-post-wrapper,
body.vvp-theater-open .stream-item-top,
body.vvp-theater-open .go-to-top-button {
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

/* Bloque en Modo Cine: Cubre el 100% de la ventana con z-index máximo */
.vvp-playlist-block.is-theater-mode {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: 100vw !important;
	max-height: 100vh !important;
	z-index: 2147483647 !important; /* Valor máximo z-index CSS */
	margin: 0 !important;
	padding: 60px 24px 24px 24px !important;
	background: rgba(4, 5, 8, 0.98) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	overflow-y: auto !important;
	animation: vvpFadeIn 0.25s ease-out;
}

/* Botón flotante superior para salir del modo cine */
.vvp-theater-close-btn {
	display: none !important;
	position: fixed !important;
	top: 16px !important;
	right: 24px !important;
	z-index: 2147483647 !important;
	background: #b71c1c !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	padding: 8px 18px !important;
	border-radius: 30px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	align-items: center !important;
	gap: 6px !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6) !important;
	transition: background 0.2s, transform 0.2s !important;
}

.vvp-playlist-block.is-theater-mode .vvp-theater-close-btn {
	display: inline-flex !important;
}

.vvp-theater-close-btn:hover {
	background: #e50914 !important;
	transform: scale(1.06) !important;
}

.vvp-playlist-block.is-theater-mode .vvp-container {
	width: 100% !important;
	max-width: 1380px !important;
	height: auto !important;
	max-height: 88vh !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
	border: 1px solid var(--vvp-accent) !important;
	animation: vvpScaleUp 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vvp-btn-theater.is-active {
	background: var(--vvp-accent) !important;
	color: #000 !important;
	border-color: var(--vvp-accent) !important;
}

@keyframes vvpScaleUp {
	from {
		transform: scale(0.96);
		opacity: 0.7;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* ==========================================================================
   9. RESPONSIVIDAD MÓVIL (100% FLUIDO SIN BUGS DE OVERFLOW)
   ========================================================================== */

@media (max-width: 880px) {
	.vvp-container {
		flex-direction: column !important;
	}

	.vvp-nav-section {
		max-height: 380px;
	}

	.vvp-playing-title {
		font-size: 13px;
	}

	.vvp-controls-bar {
		padding: 10px 14px;
	}

	.vvp-item-thumb {
		width: 85px;
		height: 48px;
	}

	.vvp-item-title {
		font-size: 12px;
	}
}

@keyframes vvpFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}