/**
 * Progresso em Círculo — estilos base.
 * Versão 1.1.4 — marcadores da legenda com tamanho e cor garantidos.
 * Autor: Adelso Araujo Lopes
 *
 * CORREÇÃO (v1.1.4): os marcadores da legenda (.pec-legend-dot) podiam
 * ficar invisíveis quando o controle "Tamanho dos marcadores" não estava
 * aplicado ou quando o tema sobrescrevia background-color. Agora o CSS
 * define tamanho mínimo, display e usa `background` com fallback sólido.
 */

.pec-wrap {
	text-align: center;
}

.pec-header,
.pec-footer {
	margin: 0;
}

.pec-title {
	margin: 0 0 4px;
}

.pec-desc {
	margin: 0;
}

/* ---------- Formato Círculo ---------- */

.pec-circle {
	position: relative;
	display: inline-block;
	width: var(--pec-size, 220px);
	height: var(--pec-size, 220px);
}

.pec-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pec-track,
.pec-progress {
	fill: none;
	stroke-width: var(--pec-stroke, 6px);
}

.pec-track {
	stroke: var(--pec-track-color, #e7eaf3);
}

.pec-progress {
	stroke: var(--pec-progress-color, #7a5cff);
	stroke-linecap: var(--pec-linecap, round);
	stroke-dasharray: 100;
}

.pec-circle[data-percent="0"] .pec-progress {
	visibility: hidden;
}

.pec-text-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
}

.pec-text {
	color: var(--pec-text-color, #1d2327);
	line-height: 1.2;
}

/* ---------- Formato Linha horizontal ---------- */

.pec-bar {
	display: block;
	width: 100%;
	max-width: var(--pec-bar-width, 100%);
	margin: 0 auto;
}

.pec-bar-track {
	position: relative;
	width: 100%;
	height: var(--pec-bar-height, 24px);
	background-color: var(--pec-track-color, #e7eaf3);
	border-radius: 999px;
}

.pec-bar-progress {
	position: relative;
	height: 100%;
	width: 0;
	background-color: var(--pec-progress-color, #7a5cff);
	border-radius: 999px;
	transition: width 0.15s linear;
}

/* Percentual DENTRO do preenchimento, ancorado na ponta direita. */
.pec-bar-text {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	z-index: 2;
	white-space: nowrap;
	pointer-events: none;
	line-height: 1;
	color: #fff;
	font-weight: 600;
}

/* ---------- Legenda ---------- */

.pec-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
}

.pec-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1.4;
}

/* Marcador: tamanho e exibição garantidos. */
.pec-legend-dot {
	display: inline-block;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	min-width: 12px;
	min-height: 12px;
	border-radius: 50%;
	box-sizing: border-box;
}

.pec-legend-dot-progress {
	background: var(--pec-progress-color, #7a5cff);
	background-color: var(--pec-progress-color, #7a5cff);
}

.pec-legend-dot-track {
	background: var(--pec-track-color, #e7eaf3);
	background-color: var(--pec-track-color, #e7eaf3);
	border: 1px solid rgba(0, 0, 0, 0.12);
}