/* Reproductor en vivo FM Cielo (ver js/player.js) */
.fm-player {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #343a40;
	border-radius: 8px;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.fm-player__play {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 50%;
	background: #02b9de;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .1s ease, background .2s ease;
}
.fm-player__play:hover { background: #19c8ec; }
.fm-player__play:active { transform: scale(.95); }
.fm-player__play:focus { outline: 3px solid #fff; outline-offset: 2px; }

/* Ícono play (triángulo) */
.fm-player__icon {
	width: 0;
	height: 0;
	margin-left: 6px;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #fff;
}
/* Ícono pausa (dos barras) */
.fm-player[data-state="playing"] .fm-player__icon {
	margin-left: 0;
	width: 22px;
	height: 26px;
	border: 0;
	border-left: 7px solid #fff;
	border-right: 7px solid #fff;
}
/* Conectando: aro girando */
.fm-player[data-state="loading"] .fm-player__icon {
	margin-left: 0;
	width: 28px;
	height: 28px;
	border: 4px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: fm-spin .8s linear infinite;
}

.fm-player__info {
	flex: 1 1 auto;
	min-width: 0;
}
.fm-player__title {
	font-weight: bold;
	font-size: 1.05rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fm-player__live {
	display: inline-block;
	padding: 1px 6px;
	margin-right: 4px;
	border-radius: 3px;
	background: #6c757d;
	font-size: .7rem;
	letter-spacing: .05em;
	vertical-align: middle;
}
.fm-player[data-state="playing"] .fm-player__live {
	background: #dc3545;
	animation: fm-blink 1.4s ease-in-out infinite;
}
.fm-player__status {
	font-size: .85rem;
	color: #ced4da;
	margin: 2px 0 6px;
}
.fm-player[data-state="error"] .fm-player__status { color: #ffb3b3; }

.fm-player__volume {
	width: 100%;
	accent-color: #02b9de;
}

@keyframes fm-spin { to { transform: rotate(360deg); } }
@keyframes fm-blink { 50% { opacity: .45; } }
