/* ==========================================================================
	Player de audio persistente (includes/js/audioplayer.js) - template 50
	Fica fora de includes/css/<idsite>/ porque a barra aparece em todos os
	sites do template 50, nao so na pagina de audioaulas.
   ========================================================================== */

.e24h-player {
	--e24h-fundo: #2c4a6e;
	--e24h-texto: #ffffff;
	--e24h-suave: #c6d4e5;
	--e24h-destaque: #ebac29;
	--e24h-destaque-texto: #1f2d3d;
	--e24h-trilho: rgba(255, 255, 255, 0.22);
	--e24h-carregado: rgba(255, 255, 255, 0.38);

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* abaixo do aviso de cookies LGPD (z-index 99999999 em rodape.cfm) */
	z-index: 9999990;
	background: var(--e24h-fundo);
	color: var(--e24h-texto);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3;
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
	transform: translateY(110%);
	transition: transform 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}
.e24h-player.is-visivel { transform: none; }
.e24h-player *, .e24h-player *::before, .e24h-player *::after { box-sizing: border-box; }
.e24h-player audio { display: none; }
.e24h-player svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.e24h-player [hidden] { display: none !important; }

.e24h-player button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.e24h-player button:focus-visible,
.e24h-player input:focus-visible,
.e24h-player__progresso:focus-visible { outline: 2px solid var(--e24h-destaque); outline-offset: 2px; }

/* ---- progresso: faixa no topo da barra, com area de toque maior que o trilho ---- */
.e24h-player__progresso {
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 16px;
	cursor: pointer;
	touch-action: none;
}
.e24h-player__trilho {
	position: absolute;
	left: 0;
	right: 0;
	top: 6px;
	height: 4px;
	background: var(--e24h-trilho);
	overflow: hidden;
	transition: height 0.15s ease, top 0.15s ease;
}
.e24h-player__carregado,
.e24h-player__tocado { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.e24h-player__carregado { background: var(--e24h-carregado); }
.e24h-player__tocado { background: var(--e24h-destaque); }
.e24h-player__pino {
	position: absolute;
	top: 2px;
	left: 0;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: var(--e24h-destaque);
	box-shadow: 0 0 0 3px rgba(235, 172, 41, 0.3);
	transform: scale(0);
	transition: transform 0.15s ease;
	pointer-events: none;
}
.e24h-player__progresso:hover .e24h-player__trilho,
.e24h-player__progresso.is-arrastando .e24h-player__trilho { top: 5px; height: 6px; }
.e24h-player__progresso:hover .e24h-player__pino,
.e24h-player__progresso:focus .e24h-player__pino,
.e24h-player__progresso.is-arrastando .e24h-player__pino { transform: scale(1); }

/* ---- layout (desktop: tudo em uma linha) ---- */
.e24h-player__corpo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto auto;
	grid-template-areas: "controles info vel vol fechar";
	align-items: center;
	gap: 8px 18px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 16px 10px;
}
.e24h-player__controles { grid-area: controles; display: flex; align-items: center; gap: 6px; }
.e24h-player__info { grid-area: info; min-width: 0; }
.e24h-player__vel { grid-area: vel; position: relative; }
.e24h-player__vol { grid-area: vol; display: flex; align-items: center; gap: 6px; }
.e24h-player__fechar { grid-area: fechar; }

.e24h-player__salto { width: 40px; height: 40px; }
.e24h-player__salto svg { width: 28px; height: 28px; }
.e24h-player__salto:hover, .e24h-player__mudo:hover, .e24h-player__fechar:hover { background: rgba(255, 255, 255, 0.12); }

.e24h-player__play {
	width: 48px;
	height: 48px;
	background: var(--e24h-destaque) !important;
	color: var(--e24h-destaque-texto) !important;
	transition: transform 0.1s ease;
}
.e24h-player__play:active { transform: scale(0.94); }
.e24h-player__play svg { width: 26px; height: 26px; }
/* aguardando: o navegador barrou o play automatico ao trocar de pagina */
.e24h-player.is-aguardando .e24h-player__play { animation: e24h-pulso 1.6s ease-in-out infinite; }
.e24h-player.is-carregando .e24h-player__play { opacity: 0.7; }

@keyframes e24h-pulso {
	0%, 100% { box-shadow: 0 0 0 0 rgba(235, 172, 41, 0.6); }
	50% { box-shadow: 0 0 0 8px rgba(235, 172, 41, 0); }
}

.e24h-player__titulo {
	display: block;
	font-weight: bold;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.e24h-player__sub {
	display: flex;
	gap: 10px;
	margin-top: 3px;
	color: var(--e24h-suave);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
}
.e24h-player__tempo { font-variant-numeric: tabular-nums; flex: none; }
.e24h-player__disciplina { overflow: hidden; text-overflow: ellipsis; }
.e24h-player__disciplina:not(:empty)::before { content: "\00b7"; margin-right: 10px; }
.e24h-player.is-erro .e24h-player__disciplina { color: #ffd27a; }

/* ---- velocidade ---- */
.e24h-player__velbtn {
	min-width: 56px;
	height: 34px;
	padding: 0 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 17px !important;
	font-weight: bold;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.e24h-player__velbtn.is-alterada { background: var(--e24h-destaque) !important; border-color: var(--e24h-destaque) !important; color: var(--e24h-destaque-texto) !important; }
.e24h-player__velmenu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	min-width: 104px;
	padding: 6px;
	background: #ffffff;
	color: var(--e24h-destaque-texto);
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.e24h-player__velmenu button {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}
.e24h-player__velmenu button:hover { background: #eef3f9; }
.e24h-player__velmenu button[aria-checked="true"] { background: #e2ebf6; font-weight: bold; }
.e24h-player__velmenu button[aria-checked="true"]::after { content: "\2713"; margin-left: auto; padding-left: 12px; }

/* ---- volume ---- */
.e24h-player__mudo, .e24h-player__fechar { width: 36px; height: 36px; }
.e24h-player__vol input[type="range"] { width: 84px; margin: 0; accent-color: var(--e24h-destaque); cursor: pointer; }

/* espaco reservado no fim da pagina (altura definida pelo JS) */
.e24h-player-espaco { height: 0; }

/* ---- celular: titulo + fechar em cima, controles centralizados embaixo ---- */
@media only screen and (max-width: 640px) {
	.e24h-player__corpo {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			"info info fechar"
			"vol controles vel";
		padding: 12px 12px 10px;
		gap: 6px 8px;
	}
	.e24h-player__fechar { justify-self: end; }
	.e24h-player__vel { justify-self: end; }
	.e24h-player__controles { gap: 10px; }
	.e24h-player__salto { width: 44px; height: 44px; }
	.e24h-player__play { width: 52px; height: 52px; }
	.e24h-player__vol input[type="range"] { display: none; }
}

/* toque: volume e pelo botao do aparelho (iOS nem permite alterar via JS) */
@media (pointer: coarse) {
	.e24h-player__vol { visibility: hidden; }
	.e24h-player__pino { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.e24h-player, .e24h-player__trilho, .e24h-player__pino { transition: none; }
	.e24h-player.is-aguardando .e24h-player__play { animation: none; }
}

/* ==========================================================================
	Cards de /vestibular/audio-aulas/ (actions.cfm): duracao e aula tocando
   ========================================================================== */
.e24h-duracao {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #5a6b7d;
	font-size: 13px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.e24h-duracao:empty { display: none; }
.e24h-duracao svg { width: 14px; height: 14px; flex: none; }
.e24h-duracao.is-carregando { opacity: 0.55; }

/* na grade, os botoes sao absolutos em top:140px (top:105px abaixo de 620px) */
#list-content .itemAudioAula .e24h-duracao { position: absolute; left: 15px; top: 116px; }
#listUnique .itemAudioAula .e24h-duracao { position: static; font-size: 18px; margin: -20px 0 24px; }
#listUnique .itemAudioAula .e24h-duracao svg { width: 18px; height: 18px; }

#list-content .itemAudioAula.e24h-atual { background: #f2f6fb; box-shadow: inset 3px 0 0 #ebac29; }
#list-content .itemAudioAula.e24h-tocando .btOuvir { background: #ebac29; border-color: #ebac29; color: #1f2d3d; }

@media only screen and (max-width: 619px) {
	#list-content .itemAudioAula .e24h-duracao { top: 82px; }
}