/* Estilos mínimos y encapsulados: nada que pueda desbordar al tema. */
.lpo-tts-player {
	--lpo-tts-border: rgba(0, 0, 0, .12);
	--lpo-tts-muted: rgba(0, 0, 0, .55);
	box-sizing: border-box;
	margin: 1.5em 0;
	padding: .85em 1em;
	border: 1px solid var(--lpo-tts-border);
	border-radius: 8px;
	background: transparent;
	max-width: 100%;
}

.lpo-tts-player *,
.lpo-tts-player *::before,
.lpo-tts-player *::after {
	box-sizing: inherit;
}

.lpo-tts-player__head {
	display: flex;
	align-items: center;
	gap: .5em;
	margin-bottom: .6em;
	font-size: .95em;
	line-height: 1.3;
}

.lpo-tts-player__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: currentColor;
	opacity: .7;
}

.lpo-tts-player__label {
	font-weight: 600;
}

.lpo-tts-player__duration {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-size: .9em;
	color: var(--lpo-tts-muted);
}

.lpo-tts-player__audio {
	display: block;
	width: 100%;
}

@media (prefers-color-scheme: dark) {
	.lpo-tts-player {
		--lpo-tts-border: rgba(255, 255, 255, .18);
		--lpo-tts-muted: rgba(255, 255, 255, .6);
	}
}