/* ForStreet Radio Player v1.0.0
   Paleta del sitio: navy #10141f / #1a2133, dorado #d4a531, rojo #e02b2b */

.fsrp {
	--fsrp-navy: #10141f;
	--fsrp-navy-2: #161c2c;
	--fsrp-red: #e02b2b;
	--fsrp-gold: #d4a531;
	--fsrp-blue: #3aa8ff;
	--fsrp-blue-2: #0a6cff;
	--fsrp-text: #dfe3ee;
	--fsrp-muted: #8b93a9;

	font-family: 'Inter', -apple-system, sans-serif;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 22px;
	height: 68px;
	background: linear-gradient(180deg, var(--fsrp-navy-2) 0%, #0e1320 100%);
	box-sizing: border-box;
}
.fsrp *, .fsrp *::before, .fsrp *::after { box-sizing: border-box; }

/* ---- Variantes de contenedor ---- */
.fsrp--fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	border-top: 1px solid rgba(212, 165, 49, 0.35);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
.fsrp--fixed.fsrp--playing {
	border-top-color: rgba(58, 168, 255, 0.44);
	box-shadow: 0 -7px 28px rgba(0, 0, 0, 0.45), 0 -2px 28px rgba(58, 168, 255, 0.2);
}
.fsrp--fixed::before,
.fsrp--fixed::after {
	content: '';
	pointer-events: none;
	opacity: 0;
	z-index: 0;
}
.fsrp--fixed::before {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: 55vh;
	background: radial-gradient(ellipse at 14% 100%, rgba(233, 247, 255, 0.48) 0%, rgba(58, 168, 255, 0.42) 13%, rgba(10, 108, 255, 0.24) 36%, rgba(10, 108, 255, 0) 74%);
	filter: blur(3px);
	transform: translateY(26%) scale(0.76);
}
.fsrp--fixed::after {
	position: absolute;
	left: 207px;
	bottom: 18px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	transform: translate(-50%, 50%) scale(0.18);
	border: 1px solid rgba(120, 210, 255, 0.62);
	filter: blur(1px);
	box-shadow: 0 0 24px rgba(58, 168, 255, 0.42), inset 0 0 24px rgba(58, 168, 255, 0.18);
}
.fsrp--fixed > * {
	position: relative;
	z-index: 1;
}
.fsrp--fixed.fsrp--burst::before {
	animation: fsrp-mega-burst 2.25s cubic-bezier(0.12, 0.72, 0.2, 1) both;
}
.fsrp--fixed.fsrp--burst::after {
	animation: fsrp-mega-ring 2.25s cubic-bezier(0.12, 0.72, 0.2, 1) both;
}
.fsrp--fixed.fsrp--burst {
	animation: fsrp-bar-burst 2.25s cubic-bezier(0.12, 0.72, 0.2, 1) both;
}
@keyframes fsrp-bar-burst {
	0% { box-shadow: 0 -7px 28px rgba(0, 0, 0, 0.45), 0 -2px 28px rgba(58, 168, 255, 0.24); }
	34% { box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.48), 0 -72px 110px rgba(58, 168, 255, 0.24), 0 -185px 210px rgba(58, 168, 255, 0.18), 0 -310px 260px rgba(10, 108, 255, 0.1); }
	100% { box-shadow: 0 -7px 28px rgba(0, 0, 0, 0.45), 0 -2px 28px rgba(58, 168, 255, 0.2); }
}
@keyframes fsrp-mega-burst {
	0% { opacity: 0.2; transform: translateY(30%) scale(0.7); }
	30% { opacity: 0.92; transform: translateY(0) scale(1); }
	68% { opacity: 0.46; transform: translateY(-4%) scale(1.04); }
	100% { opacity: 0; transform: translateY(-10%) scale(1.1); }
}
@keyframes fsrp-mega-ring {
	0% { opacity: 0.62; transform: translate(-50%, 50%) scale(0.16); }
	42% { opacity: 0.32; transform: translate(-50%, 33%) scale(8.8); }
	100% { opacity: 0; transform: translate(-50%, 22%) scale(16); }
}
.fsrp--inline {
	position: relative;
	border-radius: 14px;
	border: 1px solid rgba(212, 165, 49, 0.35);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
.fsrp--inline.fsrp--playing {
	border-color: rgba(58, 168, 255, 0.36);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.34), 0 0 34px rgba(58, 168, 255, 0.18);
}
.fsrp--compact {
	height: 40px;
	gap: 10px;
	padding: 0 12px;
	border-radius: 40px;
	border: 1px solid rgba(212, 165, 49, 0.4);
	display: inline-flex;
	width: auto;
	max-width: 240px;
}

/* ---- Marca ---- */
.fsrp__brand { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex-shrink: 0; }
.fsrp__logo {
	width: 52px; height: 52px;
	margin-top: 2px;
	border-radius: 22%;
	border: none;
	object-fit: cover;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.fsrp--playing .fsrp__logo { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 18px rgba(58, 168, 255, 0.25); }
.fsrp__brand-text { line-height: 1; }
.fsrp__name {
	font-family: 'Bebas Neue', 'Oswald', 'Inter', sans-serif;
	color: #f8f4e9;
	font-weight: 400;
	white-space: nowrap;
	text-shadow: 0 0 14px rgba(212, 165, 49, 0.18);
}
.fsrp__name-main,
.fsrp__name-sub {
	display: block;
}
.fsrp__name-main {
	font-size: 22px;
	letter-spacing: 1.7px;
}
.fsrp__name-sub {
	font-size: 12px;
	letter-spacing: 2.8px;
	margin-top: 1px;
	color: #5db3ff;
	text-shadow: 0 0 8px rgba(58, 168, 255, 0.45);
}
.fsrp__live {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--fsrp-red);
	color: #fff;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.2px;
	padding: 2px 8px;
	border-radius: 20px;
	margin-top: 5px;
	box-shadow: 0 0 12px rgba(224, 43, 43, 0.34), 0 0 18px rgba(58, 168, 255, 0.16);
}
.fsrp__live--compact { margin-top: 0; flex-shrink: 0; }
.fsrp__live-dot {
	width: 6px; height: 6px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(58, 168, 255, 0.9), 0 0 16px rgba(58, 168, 255, 0.5);
	animation: fsrp-pulse 1.8s ease-in-out infinite;
}
@keyframes fsrp-pulse {
	0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(58, 168, 255, 0.92), 0 0 18px rgba(58, 168, 255, 0.5); }
	50% { opacity: 0.62; transform: scale(0.72); box-shadow: 0 0 14px rgba(58, 168, 255, 1), 0 0 28px rgba(58, 168, 255, 0.62); }
}

/* ---- Botón play ---- */
.fsrp__play {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--fsrp-red);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
	animation: fsrp-ring 2.4s infinite;
}
.fsrp:not(.fsrp--playing):not(.fsrp--loading) .fsrp__play {
	background: var(--fsrp-red);
	animation: fsrp-ring 2.4s infinite;
	box-shadow: none;
}
.fsrp--compact .fsrp__play { width: 30px; height: 30px; }
.fsrp__play:hover { transform: scale(1.07); box-shadow: 0 0 18px rgba(224, 43, 43, 0.58), 0 0 28px rgba(58, 168, 255, 0.22); }
.fsrp--loading .fsrp__play,
.fsrp--loading .fsrp__play:hover {
	background: var(--fsrp-blue-2);
	box-shadow: 0 0 18px rgba(58, 168, 255, 0.72), 0 0 34px rgba(10, 108, 255, 0.38);
	animation: fsrp-loading-blue-pulse 1.05s ease-in-out infinite;
}
.fsrp__play svg { width: 18px; height: 18px; fill: #fff; }
.fsrp--compact .fsrp__play svg { width: 13px; height: 13px; }
.fsrp__icon--play { margin-left: 2px; }
@keyframes fsrp-ring {
	0% { box-shadow: 0 0 0 0 rgba(224, 43, 43, 0.55), 0 0 0 0 rgba(58, 168, 255, 0.3); }
	70% { box-shadow: 0 0 0 14px rgba(224, 43, 43, 0), 0 0 0 22px rgba(58, 168, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(224, 43, 43, 0), 0 0 0 0 rgba(58, 168, 255, 0); }
}

/* Estados del botón: el JS pone fsrp--playing / fsrp--loading en .fsrp */
.fsrp .fsrp__icon--pause, .fsrp .fsrp__icon--loading { display: none; }
.fsrp--playing .fsrp__icon--play, .fsrp--playing .fsrp__icon--loading { display: none; }
.fsrp--playing .fsrp__icon--pause { display: block; }
.fsrp--playing .fsrp__play {
	background: var(--fsrp-red);
	animation: fsrp-active-red-pulse 1.75s ease-in-out infinite;
}
.fsrp--loading .fsrp__icon--play, .fsrp--loading .fsrp__icon--pause { display: none; }
.fsrp--loading .fsrp__icon--loading { display: block; animation: fsrp-spin 0.9s linear infinite; }
@keyframes fsrp-spin { to { transform: rotate(360deg); } }
@keyframes fsrp-loading-blue-pulse {
	0%, 100% { box-shadow: 0 0 14px rgba(58, 168, 255, 0.56), 0 0 26px rgba(10, 108, 255, 0.3); }
	50% { box-shadow: 0 0 22px rgba(58, 168, 255, 0.86), 0 0 44px rgba(10, 108, 255, 0.52); }
}
@keyframes fsrp-active-red-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(224, 43, 43, 0.48), 0 0 18px rgba(224, 43, 43, 0.58); transform: scale(1); }
	55% { box-shadow: 0 0 0 16px rgba(224, 43, 43, 0), 0 0 34px rgba(224, 43, 43, 0.86); transform: scale(1.045); }
}

/* ---- Visualizador ---- */
.fsrp__viz {
	flex: 1;
	height: 38px;
	display: flex;
	align-items: flex-end;
	gap: 3px;
	overflow: hidden;
	min-width: 60px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fsrp--playing .fsrp__viz { filter: drop-shadow(0 0 10px rgba(58, 168, 255, 0.42)) drop-shadow(0 0 7px rgba(224, 43, 43, 0.24)); }
.fsrp--compact .fsrp__viz { height: 22px; gap: 2px; }
.fsrp__viz span {
	flex: 1;
	min-width: 2px;
	height: 6%;
	border-radius: 2px 2px 0 0;
	background: linear-gradient(180deg, #e9f7ff 0%, var(--fsrp-blue) 45%, var(--fsrp-blue-2) 100%);
	opacity: 0.3;
	transition: height 0.06s linear, opacity 0.25s ease;
}
.fsrp--playing .fsrp__viz span {
	opacity: 1;
	box-shadow: 0 0 8px rgba(58, 168, 255, 0.55), 0 0 16px rgba(10, 108, 255, 0.22);
}
.fsrp__viz span:nth-child(5n) { background: linear-gradient(180deg, #ffffff 0%, #61c7ff 48%, var(--fsrp-blue-2) 100%); }

/* Fallback CSS cuando AnalyserNode no disponible: clase fsrp--fake + playing */
.fsrp--fake.fsrp--playing .fsrp__viz span {
	animation: fsrp-eq 1s ease-in-out infinite alternate;
	transition: none;
}
@keyframes fsrp-eq { from { height: 12%; } to { height: 95%; } }

@media (prefers-reduced-motion: reduce) {
	.fsrp__live-dot,
	.fsrp__play,
	.fsrp--playing .fsrp__play,
	.fsrp--fake.fsrp--playing .fsrp__viz span,
	.fsrp--fixed.fsrp--burst,
	.fsrp--fixed.fsrp--burst::before,
	.fsrp--fixed.fsrp--burst::after {
		animation: none;
	}
}

/* ---- Sonando ahora ---- */
.fsrp__meta { min-width: 150px; max-width: 260px; line-height: 1.3; overflow: hidden; flex-shrink: 0; }
.fsrp__meta-label {
	color: var(--fsrp-gold);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.fsrp__meta-title {
	color: var(--fsrp-text);
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Volumen ---- */
.fsrp__vol { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fsrp__vol svg { width: 18px; height: 18px; fill: var(--fsrp-muted); }
.fsrp__vol input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 86px;
	height: 4px;
	border-radius: 4px;
	background: #2a3040;
	outline: none;
	margin: 0;
}
.fsrp__vol input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.fsrp__vol input[type="range"]::-moz-range-thumb {
	width: 12px; height: 12px;
	border: none;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.fsrp { height: 60px; padding: 0 14px; gap: 12px; }
	.fsrp--fixed::before { height: 44vh; background: radial-gradient(ellipse at 53% 100%, rgba(233, 247, 255, 0.42) 0%, rgba(58, 168, 255, 0.36) 14%, rgba(10, 108, 255, 0.22) 38%, rgba(10, 108, 255, 0) 76%); }
	.fsrp--fixed::after { left: 207px; bottom: 14px; width: 46px; height: 46px; }
	@keyframes fsrp-mega-burst {
		0% { opacity: 0.18; transform: translateY(28%) scale(0.72); }
		34% { opacity: 0.78; transform: translateY(0) scale(1); }
		68% { opacity: 0.36; transform: translateY(-3%) scale(1.04); }
		100% { opacity: 0; transform: translateY(-7%) scale(1.08); }
	}
	@keyframes fsrp-mega-ring {
		0% { opacity: 0.56; transform: translate(-50%, 50%) scale(0.16); }
		42% { opacity: 0.28; transform: translate(-50%, 35%) scale(5.3); }
		100% { opacity: 0; transform: translate(-50%, 27%) scale(8.6); }
	}
	@keyframes fsrp-bar-burst {
		0% { box-shadow: 0 -7px 24px rgba(0, 0, 0, 0.42), 0 -2px 24px rgba(58, 168, 255, 0.22); }
		38% { box-shadow: 0 -7px 26px rgba(0, 0, 0, 0.45), 0 -54px 84px rgba(58, 168, 255, 0.22), 0 -132px 150px rgba(58, 168, 255, 0.14), 0 -210px 190px rgba(10, 108, 255, 0.08); }
		100% { box-shadow: 0 -7px 24px rgba(0, 0, 0, 0.42), 0 -2px 24px rgba(58, 168, 255, 0.18); }
	}
	.fsrp--compact { height: 38px; }
	.fsrp__meta, .fsrp__vol { display: none; }
	.fsrp__name-main { font-size: 18px; letter-spacing: 1.4px; }
	.fsrp__name-sub { font-size: 10px; letter-spacing: 2px; }
	.fsrp__logo { width: 36px; height: 36px; }
}

/* Evitar que la barra fija tape el final del contenido */
body.fsrp-has-fixed-bar { padding-bottom: 68px; }
@media (max-width: 768px) {
	body.fsrp-has-fixed-bar { padding-bottom: 60px; }
}