/* --- ESTRUTURA E ALINHAMENTO --- */
.progress {
	width           : 210px;
	height          : 210px;
	background      : none;
	margin          : 0 auto;
	position        : relative;
	/* Centraliza o conteúdo (ícone/texto) */
	display         : flex;
	justify-content : center;
	align-items     : center;
}

/* Fundo do círculo (Cinza claro) */
.progress:after {
	content       : "";
	width         : 100%;
	height        : 100%;
	border-radius : 50%;
	border        : 15px solid #F1F5F9;
	position      : absolute;
	top           : 0;
	left          : 0;
	box-sizing    : border-box;
}

/* Container das metades */
.progress > span {
	width    : 50%;
	height   : 100%;
	overflow : hidden;
	position : absolute;
	top      : 0;
	z-index  : 1;
}

.progress .progress-left { left : 0; }
.progress .progress-right { right : 0; }

/* Barra Base */
.progress .progress-bar {
	width        : 100%;
	height       : 100%;
	background   : none;
	border-width : 15px;
	border-style : solid;
	position     : absolute;
	top          : 0;
	box-sizing   : border-box;
	/* Começa Azul */
	border-color : #2563EB;
}

/* Posição Inicial Esquerda */
.progress .progress-left .progress-bar {
	left                       : 100%;
	border-top-right-radius    : 112px;
	border-bottom-right-radius : 112px;
	border-left                : 0;
	-webkit-transform-origin   : center left;
	transform-origin           : center left;
}

/* Posição Inicial Direita + Animação 1 */
.progress .progress-right .progress-bar {
	left                      : -100%;
	border-top-left-radius    : 112px;
	border-bottom-left-radius : 112px;
	border-right              : 0;
	-webkit-transform-origin  : center right;
	transform-origin          : center right;
	/* Animação definida abaixo */
	animation                 : loading-1 2s linear forwards;
	animation-play-state      : paused; /* O JS ativa isso */
}

/* Animação 2 (Lado Esquerdo) */
.progress.blue .progress-left .progress-bar {
	/* Delay de 2s para esperar a primeira metade */
	animation            : loading-2 2s linear forwards 2s;
	animation-play-state : paused; /* O JS ativa isso */
}

/* --- CONTEÚDO CENTRAL (TEXTO) --- */
.progress .progress-value {
	position        : relative;
	z-index         : 2;
	width           : 90%;

	/* Flexbox para alinhar ícone, número e texto um sobre o outro */
	display         : flex;
	flex-direction  : column;
	justify-content : center;
	align-items     : center;
	text-align      : center;
}

/* Ícone */
.progress .progress-value i {
	font-size     : 26px;
	color         : #2563EB; /* Começa azul para combinar */
	margin-bottom : 5px;
	transition    : color 4s; /* Transição suave de cor se quiser manipular via JS depois */
}

/* Número Contador */
.progress .progress-value .counter {
	font-size   : 28px;
	font-weight : 800;
	color       : #000575;
	line-height : 1.2;
	display     : block;
}

/* Legenda "Cálculos" */
.progress .progress-value p {
	font-size      : 13px;
	color          : #000575; /* Cinza Médio */
	margin         : 0;
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : 1px;
}

/* --- ANIMAÇÕES DE COR (AZUL -> ROXO -> LARANJA) --- */

/* 1ª Metade: Azul -> Roxo (Ponte) */
@keyframes loading-1 {
	0% {
		-webkit-transform : rotate(0deg);
		transform         : rotate(0deg);
		border-color      : #FD2626;
	}

	100% {
		-webkit-transform : rotate(180deg);
		transform         : rotate(180deg);
		border-color      : #6A26FD;
	}
}
@keyframes loading-2 {
	0% {
		-webkit-transform : rotate(0deg);
		transform         : rotate(0deg);
	}
	100% {
		-webkit-transform : rotate(180deg);
		transform         : rotate(180deg);
		border-color      : #73FF00;
	}
}