/* Reproductor de texto - Text to Speech */

.text-to-speech-wrapper {
	margin: 1rem 0;
	display: flex;
	align-items: center;
}

.text-to-speech-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background-color: var(--wp--preset--color--accent, #0b70b8);
	color: var(--wp--preset--color--base, #fff);
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	line-height: 1;
}

.text-to-speech-btn:hover {
	background-color: var(--wp--preset--color--accent-hover, #095a94);
	transform: translateY(-1px);
}

.text-to-speech-btn:active {
	transform: translateY(0);
}

.text-to-speech-btn:focus {
	outline: 2px solid var(--wp--preset--color--accent, #0b70b8);
	outline-offset: 2px;
}

.text-to-speech-btn.is-playing {
	background-color: var(--wp--preset--color--contrast-2, #636363);
	animation: pulse 2s ease-in-out infinite;
}

.text-to-speech-btn.is-playing:hover {
	background-color: var(--wp--preset--color--contrast, #111);
}

.text-to-speech-btn svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.text-to-speech-label {
	font-size: 1rem;
	line-height: 1;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
}

/* Responsive */
@media (max-width: 599px) {
	.text-to-speech-btn {
		padding: 0.625rem 1rem;
		font-size: 0.9rem;
	}

	.text-to-speech-btn svg {
		width: 18px;
		height: 18px;
	}
}