.lvp-widget {
	--lvp-fill-color: #ccae82;
	--lvp-track-color: #f2f3f6;
	--lvp-size: 250px;
	--lvp-thickness: 12px;
	--lvp-grid-gap: 42px;
	--lvp-title-gap: 16px;
	--lvp-value-gap: 8px;
}

.lvp-widget,
.lvp-widget * {
	box-sizing: border-box;
}

.lvp-grid {
	display: grid;
	grid-template-columns: repeat(var(--lvp-columns, 4), minmax(0, 1fr));
	gap: var(--lvp-grid-gap);
	align-items: stretch;
}

.lvp-item {
	--lvp-progress-percent: 0%;
	--lvp-progress-angle: 0deg;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lvp-title-gap);
	min-width: 0;
}

.lvp-title-top .lvp-item,
.lvp-title-inside .lvp-item {
	flex-direction: column;
}

.lvp-title-bottom .lvp-item {
	flex-direction: column-reverse;
}

.lvp-title-left .lvp-item {
	flex-direction: row;
}

.lvp-title-right .lvp-item {
	flex-direction: row-reverse;
}

.lvp-title {
	width: 100%;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.lvp-title--external,
.lvp-title--inside {
	display: none;
}

.lvp-title-top .lvp-title--external,
.lvp-title-bottom .lvp-title--external,
.lvp-title-left .lvp-title--external,
.lvp-title-right .lvp-title--external {
	display: block;
}

.lvp-title-inside .lvp-title--inside {
	display: block;
}

.lvp-title-left .lvp-title--external,
.lvp-title-right .lvp-title--external {
	flex: 1 1 0;
}

.lvp-graphic {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 1 auto;
	width: var(--lvp-size);
	max-width: 100%;
}

.lvp-type-circle .lvp-graphic,
.lvp-type-pie .lvp-graphic {
	aspect-ratio: 1 / 1;
}

.lvp-type-semi .lvp-graphic {
	aspect-ratio: 100 / 55;
}

.lvp-type-bar .lvp-graphic {
	width: min(100%, var(--lvp-size));
	min-height: max(42px, calc(var(--lvp-thickness) + 24px));
}

.lvp-type-vertical .lvp-graphic {
	width: max(42px, calc(var(--lvp-thickness) + 24px));
	height: var(--lvp-size);
	max-height: 100%;
}

.lvp-svg,
.lvp-pie,
.lvp-bar-track,
.lvp-vertical-track {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lvp-track,
.lvp-progress {
	fill: none;
	stroke-width: var(--lvp-thickness);
	vector-effect: non-scaling-stroke;
}

.lvp-track {
	stroke: var(--lvp-track-color);
}

.lvp-progress {
	stroke: var(--lvp-fill-color);
	/*
	 * El tramo se genera como un arco SVG real mediante su atributo d.
	 * No se usan dasharray/dashoffset: así el porcentaje no depende del
	 * escalado del SVG ni puede repetirse o partirse en varios segmentos.
	 */
	stroke-dasharray: none !important;
	stroke-dashoffset: 0 !important;
	opacity: 0;
}

.lvp-cap-round .lvp-track,
.lvp-cap-round .lvp-progress {
	stroke-linecap: round;
}

.lvp-cap-butt .lvp-track,
.lvp-cap-butt .lvp-progress {
	stroke-linecap: butt;
}

.lvp-cap-square .lvp-track,
.lvp-cap-square .lvp-progress {
	stroke-linecap: square;
}

.lvp-bar-track {
	top: 50%;
	bottom: auto;
	height: var(--lvp-thickness);
	transform: translateY(-50%);
	background: var(--lvp-track-color);
	overflow: hidden;
}

.lvp-bar-progress {
	width: var(--lvp-progress-percent);
	height: 100%;
	background: var(--lvp-fill-color);
}

.lvp-vertical-track {
	left: 50%;
	right: auto;
	width: var(--lvp-thickness);
	transform: translateX(-50%);
	background: var(--lvp-track-color);
	overflow: hidden;
}

.lvp-vertical-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--lvp-progress-percent);
	background: var(--lvp-fill-color);
}

.lvp-cap-round .lvp-bar-track,
.lvp-cap-round .lvp-bar-progress,
.lvp-cap-round .lvp-vertical-track,
.lvp-cap-round .lvp-vertical-progress {
	border-radius: 999px;
}

.lvp-cap-butt .lvp-bar-track,
.lvp-cap-butt .lvp-bar-progress,
.lvp-cap-butt .lvp-vertical-track,
.lvp-cap-butt .lvp-vertical-progress,
.lvp-cap-square .lvp-bar-track,
.lvp-cap-square .lvp-bar-progress,
.lvp-cap-square .lvp-vertical-track,
.lvp-cap-square .lvp-vertical-progress {
	border-radius: 0;
}

.lvp-pie {
	border-radius: 50%;
	background: conic-gradient(
		from -90deg,
		var(--lvp-fill-color) 0deg var(--lvp-progress-angle),
		var(--lvp-track-color) var(--lvp-progress-angle) 360deg
	);
}

.lvp-center-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 76%;
	max-width: 76%;
	text-align: center;
	pointer-events: none;
}

.lvp-type-semi .lvp-center-content {
	align-self: end;
	margin-bottom: 2%;
}

.lvp-type-bar .lvp-center-content {
	width: calc(100% - 24px);
	max-width: calc(100% - 24px);
}

.lvp-type-vertical .lvp-center-content {
	width: min(180px, 90vw);
	max-width: none;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.lvp-type-vertical .lvp-value {
	margin-top: var(--lvp-value-gap);
}

.lvp-value {
	margin-top: var(--lvp-value-gap);
	line-height: 1;
}

.lvp-title-left .lvp-graphic,
.lvp-title-right .lvp-graphic {
	max-width: min(65%, var(--lvp-size));
}

@media (prefers-reduced-motion: reduce) {
	.lvp-widget *,
	.lvp-widget *::before,
	.lvp-widget *::after {
		scroll-behavior: auto !important;
	}
}