/* =========================================================
   PMT On Air – barra de sesiones (rediseño v0.25.5)
   Estética: negro/dorado como Pro Radio Music Player.
   ========================================================= */

/* Ocultar Pro Radio Music Player del frontend */
#qtmplayer-container {
	display: none !important;
}

:root {
	--pmto-h:       70px;
	--pmto-bg:      #111;
	--pmto-bg2:     #181818;
	--pmto-bg3:     #222;
	--pmto-accent:  #f2bf07;
	--pmto-text:    #afafaf;
	--pmto-bright:  #e8e8e8;
	--pmto-border:  rgba(255,255,255,.07);
	--pmto-mc:      #5000ff;
	--pmto-sc:      #ff5500;
	--pmto-ht:      #34d369;
}

/* ─── Nuclear Kirki override ─────────────────────────────── */
#pmt-onair-bar button,
#pmt-onair-bar button:hover,
#pmt-onair-bar button:focus,
#pmt-onair-bar button:active {
	background:    transparent !important;
	border:        none !important;
	border-radius: 0 !important;
	box-shadow:    none !important;
	outline:       none !important;
	cursor:        pointer;
	padding:       0;
}

/* ─── Wrapper ─── */
#pmt-onair-bar {
	position:   fixed;
	bottom:     0;
	left:       0;
	right:      0;
	z-index:    1999;
	display:    flex;
	flex-direction: column;
	font-family: inherit;
	font-size:  13px;
	line-height: 1.3;
	color:      var(--pmto-text);
}

/* ─── Strip ─── */
#pmt-onair-strip {
	display:    flex;
	align-items: center;
	height:     var(--pmto-h);
	background: var(--pmto-bg);
	border-top: 1px solid rgba(255,255,255,.1);
	flex-shrink: 0;
	overflow:   hidden;
	position:   relative;
}

/* ─── Barra de progreso real (tope del strip) ─── */
#pmt-onair-prog {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: rgba(255,255,255,.08);
	z-index: 2;
	cursor: pointer;
}
#pmt-onair-prog:hover { height: 6px; }
#pmt-onair-prog-fill {
	height: 100%;
	width: 0%;
	background: var(--pmto-accent);
	transition: width .5s linear;
	pointer-events: none;
}

/* ─── Cover art ─── */
#pmt-onair-cover {
	width:        var(--pmto-h);
	height:       var(--pmto-h);
	flex-shrink:  0;
	position:     relative;
	background:   #1a1a1a;
	display:      flex;
	align-items:  center;
	justify-content: center;
	overflow:     hidden;
}
#pmt-onair-cover-img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}
.pmt-onair-cover-icon {
	font-size: 26px !important;
	color:     #333;
}

/* ─── Controles centrales: PREV PLAY NEXT ─── */
#pmt-onair-ctrl {
	display:      flex;
	align-items:  center;
	flex-shrink:  0;
	padding:      0 6px;
	gap:          2px;
}

/* Botón genérico de control */
#pmt-onair-ctrl button {
	width:   38px !important;
	height:  38px !important;
	display: flex !important;
	align-items:     center !important;
	justify-content: center !important;
	color:       var(--pmto-text);
	transition:  color .15s, background .15s;
	flex-shrink: 0;
}
#pmt-onair-ctrl button:hover {
	color: var(--pmto-bright) !important;
}
#pmt-onair-ctrl button .material-icons {
	font-size: 22px !important;
}

/* Botón PLAY — destacado */
#pmt-onair-play {
	width:         44px !important;
	height:        44px !important;
	border-radius: 50% !important;
	background:    rgba(255,255,255,.08) !important;
	color:         var(--pmto-accent) !important;
	transition:    background .15s, transform .1s !important;
}
#pmt-onair-play:hover {
	background: rgba(255,255,255,.14) !important;
	color:      var(--pmto-accent) !important;
}
#pmt-onair-play:active {
	transform: scale(.93);
}
#pmt-onair-play .material-icons {
	font-size: 26px !important;
}

/* ─── Info (título y artista) ─── */
#pmt-onair-info {
	flex:       1;
	min-width:  0;
	display:    flex;
	flex-direction: column;
	justify-content: center;
	padding:    0 10px 0 8px;
	overflow:   hidden;
}
#pmt-onair-title {
	display:       block;
	color:         var(--pmto-accent);
	font-size:     13px;
	font-weight:   600;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}
#pmt-onair-artist {
	display:       block;
	color:         var(--pmto-text);
	font-size:     11px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	margin-top:    3px;
}
#pmt-onair-artist:empty { display: none; }

/* ─── Volumen ─── */
#pmt-onair-vol {
	display:      flex;
	align-items:  center;
	flex-shrink:  0;
	padding:      0 8px;
	gap:          6px;
	border-left:  1px solid var(--pmto-border);
}
#pmt-onair-mute {
	width:   34px !important;
	height:  34px !important;
	display: flex !important;
	align-items:     center !important;
	justify-content: center !important;
	color:       var(--pmto-text);
	flex-shrink: 0;
	transition:  color .15s;
}
#pmt-onair-mute:hover { color: var(--pmto-bright) !important; }
#pmt-onair-mute .material-icons { font-size: 20px !important; }
#pmt-onair-mute.pmt-muted .material-icons::before { content: 'volume_off'; }

#pmt-onair-vol-slider {
	-webkit-appearance: none;
	appearance:  none;
	width:       76px;
	height:      3px;
	border-radius: 2px;
	background:  rgba(255,255,255,.15);
	outline:     none;
	cursor:      pointer;
	flex-shrink: 0;
}
#pmt-onair-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:         13px;
	height:        13px;
	border-radius: 50%;
	background:    var(--pmto-accent);
	cursor:        pointer;
	box-shadow:    0 0 4px rgba(242,191,7,.4);
}
#pmt-onair-vol-slider::-moz-range-thumb {
	width:         13px;
	height:        13px;
	border:        none;
	border-radius: 50%;
	background:    var(--pmto-accent);
	cursor:        pointer;
}

/* ─── Toggle (lista de sesiones) ─── */
#pmt-onair-toggle {
	width:        72px !important;
	height:       var(--pmto-h) !important;
	flex-shrink:  0;
	border-left:  1px solid var(--pmto-border) !important;
	color:        var(--pmto-text);
	display:      flex !important;
	flex-direction: column;
	align-items:  center !important;
	justify-content: center !important;
	gap:          4px;
	transition:   color .15s, background .15s !important;
}
#pmt-onair-toggle:hover,
#pmt-onair-toggle[aria-expanded="true"] {
	color:       var(--pmto-accent) !important;
	background:  rgba(242,191,7,.06) !important;
}
#pmt-onair-toggle .material-icons { font-size: 24px !important; }
#pmt-onair-count {
	font-size:      10px;
	letter-spacing: .04em;
	line-height:    1;
}

/* ─── Drawer ─── */
#pmt-onair-drawer {
	background:         var(--pmto-bg2);
	border-top:         1px solid var(--pmto-border);
	max-height:         300px;
	overflow-y:         auto;
	overscroll-behavior: contain;
	scrollbar-width:    thin;
	scrollbar-color:    #2a2a2a transparent;
}
#pmt-onair-drawer::-webkit-scrollbar { width: 4px; }
#pmt-onair-drawer::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }

/* ─── Ítem de sesión ─── */
.pmt-onair-item {
	display:       flex;
	align-items:   center;
	gap:           10px;
	padding:       9px 14px;
	cursor:        pointer;
	border-bottom: 1px solid var(--pmto-border);
	transition:    background .1s;
}
.pmt-onair-item:last-child { border-bottom: none; }
.pmt-onair-item:hover      { background: rgba(255,255,255,.04); }
.pmt-onair-item--active    { background: rgba(242,191,7,.07); }
.pmt-onair-item--active .pmt-onair-item__title { color: var(--pmto-accent); }

.pmt-onair-item__thumb {
	width:    46px;
	height:   46px;
	flex-shrink: 0;
	border-radius: 3px;
	background: #1a1a1a;
	display:    flex;
	align-items: center;
	justify-content: center;
	overflow:   hidden;
	position:   relative;
}
.pmt-onair-item__thumb img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}
.pmt-onair-item__thumb .material-icons { font-size: 20px !important; color: #333; }

.pmt-onair-item__info {
	flex:      1;
	min-width: 0;
}
.pmt-onair-item__title {
	display:       block;
	font-size:     13px;
	font-weight:   500;
	color:         var(--pmto-bright);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}
.pmt-onair-item__artist {
	display:       block;
	font-size:     11px;
	color:         var(--pmto-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	margin-top:    2px;
}
.pmt-onair-item__artist:empty { display: none; }

.pmt-onair-item__badge {
	flex-shrink:   0;
	font-size:     9px;
	font-weight:   700;
	padding:       2px 5px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pmt-onair-item__badge--mixcloud   { background: var(--pmto-mc); color: #fff; }
.pmt-onair-item__badge--soundcloud { background: var(--pmto-sc); color: #fff; }
.pmt-onair-item__badge--hearthis   { background: var(--pmto-ht); color: #000; }

.pmt-onair-item__play {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	color:       var(--pmto-text);
	opacity:     0;
	transition:  opacity .12s;
}
.pmt-onair-item__play .material-icons { font-size: 18px !important; }
.pmt-onair-item:hover .pmt-onair-item__play        { opacity: 1; }
.pmt-onair-item--active .pmt-onair-item__play      { opacity: 1; color: var(--pmto-accent); }

/* ─── Embed (iframe dentro del viewport para que autoplay funcione) ─── */
#pmt-onair-embed {
	position:       fixed;
	bottom:         0;
	left:           0;
	width:          320px;
	height:         70px;
	overflow:       hidden;
	z-index:        1998;   /* justo debajo del bar (1999) */
	opacity:        0.01;   /* casi invisible pero en viewport → autoplay OK */
	pointer-events: none;
}
#pmt-onair-embed iframe {
	width:  320px;
	height: 70px;
	border: none;
}

/* ─── Spacer ─── */
#pmt-onair-spacer {
	display: block;
	height:  70px;
}

/* ─── Mobile ─── */
@media (max-width: 600px) {
	#pmt-onair-cover      { width: 52px; height: var(--pmto-h); }
	#pmt-onair-ctrl       { padding: 0 2px; gap: 0; }
	#pmt-onair-vol        { display: none; }
	#pmt-onair-toggle     { width: 52px !important; }
	#pmt-onair-count      { display: none; }
}