@import url("../../../libs/css/root.css");


.barCronometer {
	height:60px;
	width:100%;
	background-color:var(--color-verdePetroleo);
	position: fixed;
	top:0;
	z-index: 1030;
	gap:50px;
}

.elementsChonometer  {
	gao:20px;
}

/* Container Principal */
.timer-section {
	color: white;
	padding: 6px 0;
	//margin-right:100px;
}

/* Estrutura dos Cartões Flip */
.cont-times {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.flip-card {
	width: 30px;
	background: #333;
	border-radius: 8px;
	padding: 2px;
	position: relative;
	box-shadow: 0 10px 25px rgba(0,0,0,0.5);
	/* Efeito de dobra visual (gradiente) */
	background: linear-gradient(to bottom, #444 50%, #2a2a2a 50%);
}

/* Linha divisória central da palheta */
.flip-card::after-xxx {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: rgba(0,0,0,0.6);
	transform: translateY(-50%);
	z-index: 2;
}

.span-number {
	font-family: 'Monaco', 'Consolas', monospace;
	font-size: 1.1rem;
	font-weight: 800;
	color: #00d2ff;
	color: var(--color-primary);
	text-shadow: 0 4px 10px rgba(0,210,255,0.3);
	display: block;
	line-height: 1;
}

.span-time {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #888;
	font-weight: bold;
	//margin-top: 10px;
	display: block;
}

/* Barra de Progresso Estilo Neon */
.progress-container {
	max-width: 600px;
}

.progress {
	height: 10px;
	background-color: #333;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid #444;
}

.progressBarChonometer {
	background: linear-gradient(90deg, #00d2ff, #3a7bd5);
	box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
	transition: width 1s linear;
	background: var(--color-primary);
}

/* Animação de impacto ao mudar o número */
.flip-animate {
	animation: flipDown 0.4s ease-out;
}

@keyframes flipDown {
	0% { transform: scale(1); filter: brightness(1); }
	50% { transform: scale(1.08); filter: brightness(1.3); }
	100% { transform: scale(1); filter: brightness(1); }
}

/* Responsividade para telas menores */
@media (max-width: 576px) {
	.flip-card { 
		//min-width: 70px; 
		//padding: 10px; 
	}
	
	.span-number { 
		//font-size: 2rem; 
	}
}

.elementsChonometer {
	display: none;
}