/* Levapan Elements — Tiempo de lectura */

.lv-reading-time {
	--lv-rt-icon-size: 28px;
	--lv-rt-bar: #cf1d1d;
	--lv-rt-track: #e6e6e6;
	--lv-rt-bar-height: 14px;
	--lv-rt-bar-radius: 999px;

	/* En línea (1fr auto) el header y el stat comparten fila; la barra y el
	   tiempo abarcan ambas columnas, así que apilan igual en los dos modos. */
	display: grid;
	grid-template-columns: var(--lv-rt-columns, 1fr);
	align-items: center;
	gap: 12px;
}

.lv-reading-time__bar,
.lv-reading-time__time {
	grid-column: 1 / -1;
}

.lv-reading-time__header {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.lv-reading-time__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--lv-rt-icon-size);
	line-height: 1;
}

.lv-reading-time__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lv-reading-time__icon i {
	font-size: inherit;
}

.lv-reading-time__stat {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
}

.lv-reading-time__percent {
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.lv-reading-time__bar {
	position: relative;
	width: 100%;
	height: var(--lv-rt-bar-height);
	border-radius: var(--lv-rt-bar-radius);
	background-color: var(--lv-rt-track);
	overflow: hidden;
}

.lv-reading-time__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background-color: var(--lv-rt-bar);
	transition: width 0.15s linear;
}

.lv-reading-time__time:empty {
	display: none;
}