/**
 * Mini-player de NoticeVoice.
 *
 * Personalización: sobreescribe las variables --nv-* desde el tema
 * (p. ej. en la Fase 6, con los colores de El Faro).
 */

.noticevoice-player {
	--nv-accent: #1a6fb5;
	--nv-accent-contrast: #ffffff;
	--nv-bg: #f6f8fa;
	--nv-border: #e0e5ea;
	--nv-text: #1f2933;
	--nv-text-soft: #6b7684;
	--nv-radius: 14px;

	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--nv-bg);
	border: 1px solid var(--nv-border);
	border-radius: var(--nv-radius);
	padding: 12px 16px;
	margin: 0 0 1.5em;
	font-family: inherit;
	color: var(--nv-text);
	line-height: 1.3;
}

.noticevoice-player .nv-play {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--nv-accent);
	color: var(--nv-accent-contrast);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform 0.12s ease, filter 0.12s ease;
}

.noticevoice-player .nv-play:hover,
.noticevoice-player .nv-play:focus-visible {
	filter: brightness(1.12);
	transform: scale(1.05);
}

.noticevoice-player .nv-play svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.noticevoice-player .nv-icon-pause { display: none; }
.noticevoice-player.nv-playing .nv-icon-play { display: none; }
.noticevoice-player.nv-playing .nv-icon-pause { display: block; }

.noticevoice-player .nv-body {
	flex: 1 1 auto;
	min-width: 0;
}

.noticevoice-player .nv-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nv-text-soft);
	margin-bottom: 6px;
}

.noticevoice-player .nv-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.noticevoice-player .nv-time {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--nv-text-soft);
}

.noticevoice-player .nv-progress {
	flex: 1 1 auto;
	height: 6px;
	background: var(--nv-border);
	border-radius: 3px;
	cursor: pointer;
	position: relative;
}

.noticevoice-player .nv-progress:focus-visible {
	outline: 2px solid var(--nv-accent);
	outline-offset: 3px;
}

.noticevoice-player .nv-progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	background: var(--nv-accent);
	border-radius: 3px;
}

.noticevoice-player .nv-rate {
	flex: 0 0 auto;
	border: 1px solid var(--nv-border);
	background: transparent;
	color: var(--nv-text-soft);
	border-radius: 999px;
	font-size: 0.78rem;
	padding: 4px 10px;
	cursor: pointer;
	transition: color 0.12s ease, border-color 0.12s ease;
}

.noticevoice-player .nv-rate:hover,
.noticevoice-player .nv-rate:focus-visible {
	color: var(--nv-accent);
	border-color: var(--nv-accent);
}

@media (max-width: 480px) {
	.noticevoice-player { padding: 10px 12px; gap: 10px; }
	.noticevoice-player .nv-play { width: 40px; height: 40px; }
	.noticevoice-player .nv-label { margin-bottom: 4px; }
}