/* Bajlum — línea de tiempo del flujo de producción.
   Se usa tanto en el admin (detalle del pedido) como en "Ver pedido"
   del cliente. La cabeza del jaguar marca la etapa actual; los acentos
   son los mismos 5 colores de las colecciones. */

.bajlum-of-timeline{
	display:flex;
	list-style:none;
	padding:0;
	margin:28px 0 34px;
}
.bajlum-of-step{
	flex:1;
	position:relative;
	text-align:center;
	padding-top:30px;
}
.bajlum-of-step:not(:first-child)::before{
	content:'';
	position:absolute;
	top:47px;
	right:50%;
	width:100%;
	height:2px;
	background:#3a3a3a;
	z-index:0;
}
.bajlum-of-step.is-reached:not(:first-child)::before{
	background:var(--bajlum-of-accent);
}

.bajlum-of-dot{
	position:relative;
	z-index:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:50%;
	font-size:15px;
	background:#1c1c1c;
	border:2px solid #3a3a3a;
	color:#666;
	transition:background .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease;
}
.bajlum-of-step.is-reached .bajlum-of-dot{
	border-color:var(--bajlum-of-accent);
	color:var(--bajlum-of-accent);
	background:color-mix(in srgb, var(--bajlum-of-accent) 18%, #1c1c1c);
	box-shadow:0 0 14px color-mix(in srgb, var(--bajlum-of-accent) 45%, transparent);
}

.bajlum-of-label{
	display:block;
	margin-top:8px;
	font-size:11px;
	letter-spacing:.06em;
	color:#888;
	font-family:Georgia,'Times New Roman',serif;
}
.bajlum-of-step.is-reached .bajlum-of-label{
	color:var(--bajlum-of-accent);
}

.bajlum-of-marker{
	position:absolute;
	top:-4px;
	left:50%;
	transform:translateX(-50%);
	width:28px;
	height:28px;
	border-radius:50%;
	filter:drop-shadow(0 0 10px rgba(255,170,0,.6));
	animation:bajlumOfBounce 2s infinite ease-in-out;
}
@keyframes bajlumOfBounce{
	0%, 100%{ transform:translateX(-50%) translateY(0); }
	50%{ transform:translateX(-50%) translateY(-4px); }
}

#bajlum_of_timeline .inside{
	overflow-x:auto;
}

@media (max-width:640px){
	.bajlum-of-timeline{ flex-wrap:wrap; }
	.bajlum-of-step{ flex:1 1 20%; padding-top:26px; }
	.bajlum-of-label{ font-size:9px; }
}
@media (prefers-reduced-motion:reduce){
	.bajlum-of-marker{ animation:none; }
}