/* Widget Twitch / TikTok — dock inferior derecho (MuVictus) */

.muvictus-streamer-widget {

	position: fixed;

	right: 0;

	bottom: 20px;

	z-index: 9990;

	display: flex;

	flex-direction: row;

	align-items: flex-end;

	gap: 0;

	pointer-events: none;

}



.muvictus-streamer-widget__stage {

	position: relative;

	flex: 0 0 0;

	width: 0;

	height: 0;

	overflow: visible;

	pointer-events: none;

}



.muvictus-streamer-widget__buttons,

.muvictus-streamer-widget__panel.is-open {

	pointer-events: auto;

}



.muvictus-streamer-widget__buttons {

	display: flex;

	flex-direction: column;

	gap: 10px;

	padding: 0 0 0 4px;

}



.muvictus-streamer-widget__btn {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 8px;

	min-width: 52px;

	padding: 12px 14px;

	border: 1px solid rgba(0, 216, 255, 0.35);

	border-right: 0;

	border-radius: 10px 0 0 10px;

	background: linear-gradient(180deg, rgba(8, 42, 68, 0.96) 0%, rgba(2, 24, 44, 0.98) 100%);

	color: #dce8f5;

	font-size: 12px;

	font-weight: 700;

	font-family: inherit;

	text-transform: uppercase;

	letter-spacing: 0.04em;

	cursor: pointer;

	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

	box-shadow: -6px 6px 24px rgba(0, 0, 0, 0.45);

}



.muvictus-streamer-widget__btn:hover {

	transform: translateX(-2px);

}



.muvictus-streamer-widget__btn:hover,

.muvictus-streamer-widget__btn[aria-expanded="true"] {

	background: linear-gradient(180deg, rgba(0, 80, 110, 0.5) 0%, rgba(2, 31, 56, 0.98) 100%);

	color: #00ffe4;

	border-color: rgba(0, 255, 228, 0.55);

	box-shadow: -6px 6px 28px rgba(0, 216, 255, 0.2);

}



.muvictus-streamer-widget__btn--twitch[aria-expanded="true"],

.muvictus-streamer-widget__btn--twitch:hover {

	color: #d8b4ff;

	border-color: rgba(145, 70, 255, 0.55);

}



.muvictus-streamer-widget__btn--tiktok[aria-expanded="true"],

.muvictus-streamer-widget__btn--tiktok:hover {

	color: #00f2ea;

	border-color: rgba(0, 242, 234, 0.45);

}



.muvictus-streamer-widget__btn svg {

	flex-shrink: 0;

}



.muvictus-streamer-widget__btn span {

	white-space: nowrap;

}



/* Panel de video: anclado abajo, a la izquierda de los botones */

.muvictus-streamer-widget__panel {

	position: absolute;

	right: 0;

	bottom: 0;

	width: min(400px, calc(100vw - 64px));

	border-radius: 12px 0 0 12px;

	background: #021a2e;

	border: 1px solid rgba(0, 216, 255, 0.32);

	border-right: 0;

	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55), 0 8px 32px rgba(0, 0, 0, 0.35);

	z-index: 1;

	display: flex;

	flex-direction: column;

	overflow: hidden;

	opacity: 0;

	visibility: hidden;

	transform: translateX(calc(100% + 12px)) scale(0.96);

	transform-origin: bottom right;

	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0.25s;

	pointer-events: none;

}



.muvictus-streamer-widget__panel.is-open {

	opacity: 1;

	visibility: visible;

	transform: translateX(0) scale(1);

	pointer-events: auto;

}



.muvictus-streamer-widget__panel--twitch {

	border-color: rgba(145, 70, 255, 0.4);

	box-shadow: -12px 0 40px rgba(80, 40, 140, 0.25), 0 8px 32px rgba(0, 0, 0, 0.4);

}



.muvictus-streamer-widget__panel--twitch .muvictus-streamer-widget__panel-title {

	color: #c9a3ff;

}



.muvictus-streamer-widget__panel--tiktok {

	border-color: rgba(0, 242, 234, 0.35);

}



.muvictus-streamer-widget__panel--tiktok .muvictus-streamer-widget__panel-title {

	color: #00f2ea;

}



.muvictus-streamer-widget__panel-head {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 10px;

	padding: 10px 12px;

	background: rgba(0, 0, 0, 0.45);

	border-bottom: 1px solid rgba(255, 255, 255, 0.06);

	flex-shrink: 0;

}



.muvictus-streamer-widget__panel-title {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	font-size: 13px;

	font-weight: 700;

	color: #00d8ff;

	text-transform: uppercase;

	letter-spacing: 0.05em;

}



.muvictus-streamer-widget__panel-close {

	flex-shrink: 0;

	background: rgba(255, 255, 255, 0.06);

	border: 1px solid rgba(255, 255, 255, 0.1);

	border-radius: 6px;

	color: #9eb8cc;

	font-size: 20px;

	line-height: 1;

	width: 32px;

	height: 32px;

	cursor: pointer;

	padding: 0;

	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;

}



.muvictus-streamer-widget__panel-close:hover {

	color: #00ffe4;

	border-color: rgba(0, 255, 228, 0.4);

	background: rgba(0, 216, 255, 0.12);

}



.muvictus-streamer-widget__panel-body {

	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	background: #000;

	flex-shrink: 0;

}



.muvictus-streamer-widget__panel-body iframe {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	border: none;

	z-index: 2;

}



.muvictus-streamer-widget__loader {

	position: absolute;

	inset: 0;

	z-index: 1;

	background: linear-gradient(110deg, #0a1628 0%, #142a40 45%, #0a1628 90%);

	background-size: 200% 100%;

	animation: muvictus-streamer-shimmer 1.2s ease-in-out infinite;

}



.muvictus-streamer-widget__panel.is-loaded .muvictus-streamer-widget__loader {

	opacity: 0;

	pointer-events: none;

	transition: opacity 0.35s ease;

}



@keyframes muvictus-streamer-shimmer {

	0% { background-position: 100% 0; }

	100% { background-position: -100% 0; }

}



.muvictus-streamer-widget__panel-foot {

	flex-shrink: 0;

	padding: 8px 12px;

	background: rgba(0, 0, 0, 0.4);

	border-top: 1px solid rgba(255, 255, 255, 0.06);

	text-align: center;

}



.muvictus-streamer-widget__panel-foot a {

	font-size: 12px;

	font-weight: 600;

	color: #8bb9d3;

	text-decoration: none;

	text-transform: uppercase;

	letter-spacing: 0.04em;

	transition: color 0.2s ease;

}



.muvictus-streamer-widget__panel-foot a:hover {

	color: #00ffe4;

}



.muvictus-streamer-widget__panel--twitch .muvictus-streamer-widget__panel-foot a:hover {

	color: #d8b4ff;

}



.muvictus-streamer-widget__panel--tiktok .muvictus-streamer-widget__panel-foot a:hover {

	color: #00f2ea;

}



@media (max-width: 520px) {

	.muvictus-streamer-widget {

		bottom: 12px;

	}



	.muvictus-streamer-widget__panel {

		width: min(100vw - 56px, 360px);

		border-radius: 10px 0 0 10px;

	}



	.muvictus-streamer-widget__btn {

		padding: 10px 12px;

		min-width: 48px;

	}



	.muvictus-streamer-widget__btn span {

		display: none;

	}

}



@media (max-height: 500px) {

	.muvictus-streamer-widget__panel-body {

		aspect-ratio: 4 / 3;

		max-height: 40vh;

	}

}