/* Radar: cortes por sector y plataforma. Solo lo que no está en ninja.css. */

/* Barra con la media marcada: el dato solo dice algo al lado del total. */
.nj-seg-bar {
	--v: 0;
	--avg: 0;
	--c: var(--nj-ink);
	position: relative;
	display: block;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--nj-paper-3);
}

.nj-seg-bar::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v) * 1%);
	min-width: 2px;
	border-radius: inherit;
	background: var(--c);
}

.nj-seg-bar::after {
	content: "";
	position: absolute;
	top: -0.25rem;
	bottom: -0.25rem;
	left: calc(var(--avg) * 1%);
	width: 2px;
	margin-left: -1px;
	background: var(--nj-ink);
	border-radius: 1px;
	box-shadow: 0 0 0 2px var(--nj-paper);
}

.nj-section--tint .nj-seg-bar::after {
	box-shadow: 0 0 0 2px var(--nj-paper-2);
}

.nj-seg-bars {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--nj-ink);
}

.nj-seg-bars__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 5.5rem;
	gap: 0.5rem 1.25rem;
	align-items: center;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--nj-rule);
}

.nj-seg-bars__row .nj-seg-bar {
	grid-column: 1 / -1;
	grid-row: 2;
}

@media (min-width: 800px) {
	.nj-seg-bars__row {
		grid-template-columns: 15rem minmax(0, 1fr) 6rem;
	}
	.nj-seg-bars__row .nj-seg-bar {
		grid-column: 2;
		grid-row: 1;
	}
}

.nj-seg-bars__name {
	font-weight: 640;
	font-size: var(--nj-fs-sm);
}

.nj-seg-bars__val {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: var(--nj-fs-sm);
}

.nj-seg-bars__val small {
	display: block;
	font-weight: 500;
	font-size: var(--nj-fs-xs);
	color: var(--nj-ink-3);
}

.nj-seg-delta.is-up {
	color: var(--nj-pos);
	font-weight: 650;
}

.nj-seg-delta.is-down {
	color: var(--nj-ink-3);
}