/* ============================================================
   LVAP · Player de audio "La noticia, en voz alta"
   Componente autocontenido (handoff design/noticia/player-audio).
   Prefijo .lvap para evitar colisiones. Único ajuste sobre el handoff:
   las fuentes apuntan a los tokens del sitio (--f-headline / --f-sans;
   el sitio no usa mono → la "mono" del player es la sans del sitio).
   ============================================================ */
.lvap {
	/* — tokens del componente (sobreescribibles) — */
	--lvap-navy: #001c4c; /* play + onda reproducida */
	--lvap-surface: #fafaf6; /* fondo de la tarjeta */
	--lvap-border: #d9d5ca; /* borde + onda sin reproducir */
	--lvap-ink: #15171a; /* título */
	--lvap-meta: #6b6960; /* tiempos y controles */
	--lvap-wave-rest: #d9d5ca; /* barras sin reproducir */
	--lvap-font-title: var(--f-headline); /* serif de marca (Tiempos Headline) */
	--lvap-font-mono: var(--f-sans); /* el sitio no usa mono → sans */

	box-sizing: border-box;
	border: 1px solid var(--hair);
	padding: 16px 16px;
	color: var(--lvap-ink);
	margin-block: var(--margin-block);
	margin-left: auto;
	margin-right: auto;
}

.opinion .lvap {
	margin-top: 0 !important;
}

.lvap * {
	box-sizing: border-box;
}

/* cabecera: título + velocidad */
.lvap__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.lvap__title {
	display: block;
	font-family: var(--f-sans);
	font-size: var(--fs-18);
	font-weight: 600;
	line-height: 1.1;
	color: var(--ink);
}
.lvap__speed {
	flex: 0 0 auto;
	height: 26px;
	padding: 0 9px;
	border-radius: 999px;
	border: 1px solid var(--lvap-border);
	background: transparent;
	cursor: pointer;
	font-family: var(--lvap-font-mono);
	font-size: 11px;
	font-weight: 500;
	color: var(--lvap-ink);
	white-space: nowrap;
}
.lvap__speed:hover {
	border-color: var(--lvap-navy);
}

/* fila principal: play + cuerpo */
.lvap__main {
	display: flex;
	align-items: center;
	gap: clamp(14px, 3vw, 20px);
}

.lvap__play {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 0;
	background: var(--lvap-navy);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform 0.1s ease;
}
.lvap__play:active {
	transform: scale(0.95);
}
.lvap__play svg {
	display: block;
}
.lvap__play .lvap__ico-pause {
	display: none;
}
.lvap.is-playing .lvap__play .lvap__ico-play {
	display: none;
}
.lvap.is-playing .lvap__play .lvap__ico-pause {
	display: block;
}

.lvap__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* onda (waveform) — dos capas idénticas; la reproducida se recorta por ancho */
.lvap__wave {
	--pct: 0%;
	position: relative;
	height: 42px;
	width: 100%;
	cursor: pointer;
	touch-action: none;
}
.lvap__bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 2px;
}
.lvap__bars span {
	flex: 1;
	min-height: 2px;
	border-radius: 999px;
}
.lvap__bars--rest span {
	background: var(--lvap-wave-rest);
}
.lvap__bars--played {
	overflow: hidden;
	width: var(--pct);
}
.lvap__bars--played span {
	background: var(--lvap-navy);
}

/* tiempos + saltos de 15 s */
.lvap__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--lvap-font-mono);
	font-size: 11px;
	color: var(--lvap-meta);
}
.lvap__skips {
	display: flex;
	gap: 18px;
}
.lvap__skip {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var(--lvap-meta);
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--lvap-font-mono);
	font-size: 11px;
	font-weight: 600;
	transition: color 0.15s;
}
.lvap__skip:hover {
	color: var(--lvap-navy);
}
.lvap__skip svg {
	display: block;
}

/* móvil */
@media (max-width: 480px) {
	.lvap {
		padding: 18px 16px;
	}
	.lvap__title {
		font-size: 18px;
	}
	.lvap__play {
		width: 54px;
		height: 54px;
	}
	.lvap__wave {
		height: 34px;
	}
}