/* Desde Origen – Fecha estimada de entrega (opción B: línea de tiempo) */
.dofe {
	--dofe-green: #0DAA56;
	--dofe-green-dark: #078A44;
	--dofe-ink: #202435;
	--dofe-muted: #6B7080;
	--dofe-line: #E4E7EE;

	box-sizing: border-box;
	width: 100%;
	margin: 16px 0;
	padding: 14px 14px 12px;
	background: #fff;
	border: 1px solid var(--dofe-line);
	border-radius: 8px;
	color: var(--dofe-ink);
	font-family: inherit;
	line-height: 1.35;
}
.dofe[hidden] { display: none !important; }
.dofe *, .dofe *::before, .dofe *::after { box-sizing: border-box; }

.dofe svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dofe__head {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 14px;
	font-size: 13.5px;
	font-weight: 600;
}
.dofe__ico { flex: none; width: 20px; height: 20px; color: var(--dofe-green); }
.dofe__head b { color: var(--dofe-green-dark); font-weight: 600; }

.dofe__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dofe__steps::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 16.66%;
	right: 16.66%;
	height: 2px;
	background: linear-gradient(90deg, var(--dofe-green) 50%, var(--dofe-line) 50%);
}
.dofe__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0 4px;
	text-align: center;
}
.dofe__step::marker { content: none; }

.dofe__dot {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-bottom: 6px;
	background: #fff;
	border: 2px solid var(--dofe-line);
	border-radius: 50%;
	color: var(--dofe-muted);
}
.dofe__dot svg { width: 15px; height: 15px; }
.dofe__step.is-done .dofe__dot { background: var(--dofe-green); border-color: var(--dofe-green); color: #fff; }
.dofe__step.is-next .dofe__dot { border-color: var(--dofe-green); color: var(--dofe-green); }

.dofe__lbl {
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dofe-muted);
}
.dofe__date {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
}

.dofe__nowrap { white-space: nowrap; }

@media (max-width: 360px) {
	.dofe__head { font-size: 13px; }
	.dofe__date { font-size: 12px; }
}