/* Levapan Elements — Dificultad de receta */

.lv-difficulty {
	--lv-df-bar-active: #cf1d1d;
	--lv-df-bar-inactive: #d9d9d9;
	--lv-df-bar-width: 9px;
	--lv-df-bars-height: 34px;
	--lv-df-bar-gap: 5px;
	--lv-df-bar-radius: 2px;
	--lv-df-circle-size: 96px;
	--lv-df-circle-bg: #fff;
	--lv-df-circle-radius: 50%;
	--lv-df-gap: 10px;
	--lv-df-text-gap: 2px;

	/* Layout: las escribe el selectors_dictionary del control; default apilada. */
	--lv-df-direction: column;
	--lv-df-align: center;
	--lv-df-text-align: center;
	--lv-df-meter-size: var(--lv-df-circle-size);
	--lv-df-meter-bg: var(--lv-df-circle-bg);

	display: flex;
	flex-direction: var(--lv-df-direction);
	align-items: var(--lv-df-align);
	gap: var(--lv-df-gap);
}

/* Círculo de fondo. En línea, el dictionary lo colapsa (size auto, bg
   transparent) sin cambiar el marcado. */
.lv-difficulty__meter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lv-df-meter-size);
	height: var(--lv-df-meter-size);
	background-color: var(--lv-df-meter-bg);
	border-radius: var(--lv-df-circle-radius);
	flex-shrink: 0;
}

/* Riel de barras ascendentes: --lv-df-bars-height fija la altura total y
   cada barra trae su % en la variable inline --lv-df-bar-h. */
.lv-difficulty__bars {
	display: flex;
	align-items: flex-end;
	gap: var(--lv-df-bar-gap);
	height: var(--lv-df-bars-height);
}

.lv-difficulty__bar {
	width: var(--lv-df-bar-width);
	height: var(--lv-df-bar-h, 100%);
	min-height: var(--lv-df-bar-width);
	border-radius: var(--lv-df-bar-radius);
	background-color: var(--lv-df-bar-inactive);
}

.lv-difficulty__bar.is-active {
	background-color: var(--lv-df-bar-active);
}

.lv-difficulty__text {
	display: flex;
	flex-direction: column;
	gap: var(--lv-df-text-gap);
	text-align: var(--lv-df-text-align);
	min-width: 0;
}

.lv-difficulty__level {
	font-weight: 700;
	color: var(--lv-df-level-color, inherit);
	line-height: 1.2;
}

.lv-difficulty__caption {
	color: var(--lv-df-caption-color, inherit);
	line-height: 1.2;
}