/* ============================================================
   Linha do tempo ilustrada do pedido + historico do painel
   Usada no site (cliente) e no painel (modo compacto).
   ============================================================ */

.etapas { --e-linha: #E4DED6; --e-feito: #1A1A1A; --e-atual: #B5886B; --e-ok: #3E7C5A; --e-icone: 76px;
    list-style: none; margin: 0; padding: 0; counter-reset: etapa; }

/* ---------- Modo cliente: vertical, texto a esquerda, icone a direita ---------- */
.etapa { display: grid; grid-template-columns: 1fr 26px var(--e-icone); column-gap: .9rem; align-items: center; min-height: 104px; position: relative; }
.etapa__texto { text-align: right; line-height: 1.35; padding: .3rem 0; }
.etapa__texto strong { display: inline; font-family: var(--fonte-titulo, Georgia, serif); font-weight: 500; font-size: 1.22rem; color: var(--e-feito); }
.etapa__texto span { display: block; font-size: .84rem; color: #6B6B6B; margin-top: .1rem; }
.etapa__texto time { display: block; font-size: .74rem; color: #8F8A84; margin-top: .15rem; letter-spacing: .02em; }
.etapa__agora { font-style: normal; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; background: var(--e-atual); color: #fff; padding: .12rem .5rem; border-radius: 999px; vertical-align: .15em; margin-left: .3rem; }

/* trilho: linha vertical + bolinha */
.etapa__marca { align-self: stretch; position: relative; display: flex; justify-content: center; align-items: center; }
.etapa__marca::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--e-linha); border-radius: 2px; }
.etapa:first-child .etapa__marca::before { top: 50%; }
.etapa--feito .etapa__marca::before { background: var(--e-feito); }
.etapa--atual .etapa__marca::before { background: linear-gradient(to bottom, var(--e-feito) 0, var(--e-feito) 50%, var(--e-linha) 50%); }
.etapa--ultima .etapa__marca::before { bottom: 50%; }
.etapa__marca i { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--e-linha); }
.etapa--feito .etapa__marca i { background: var(--e-feito); border-color: var(--e-feito); }
.etapa--atual .etapa__marca i { background: #fff; border-color: var(--e-atual); box-shadow: 0 0 0 5px rgba(181, 136, 107, .25); animation: etapa-pulso 1.8s ease-in-out infinite; }

/* icone ilustrado */
.etapa__icone { width: var(--e-icone); height: var(--e-icone); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #F7F1EB; }
.etapa-svg { width: 76%; height: 76%; display: block; overflow: visible; }
.etapa--pendente .etapa__icone { background: #F1EFEC; }
.etapa--pendente .etapa-svg { filter: grayscale(1); opacity: .32; }
.etapa--pendente .etapa__texto strong { color: #9A948C; }
.etapa--atual .etapa__icone { background: #F3E6E0; animation: etapa-pulo 2.2s ease-in-out infinite; }
.etapa--atual .etapa__texto strong { color: var(--e-feito); }
.etapa--atual .etapa-roda { transform-origin: center; animation: etapa-vibra .5s linear infinite; }

/* seta no fim da linha do tempo, como no exemplo */
.etapas--completa .etapa--ultima .etapa__icone { background: #E8F2EC; box-shadow: 0 0 0 4px rgba(62, 124, 90, .18); }
.etapas--completa .etapa--ultima .etapa__marca i { background: var(--e-ok); border-color: var(--e-ok); }
.etapas--completa .etapa--ultima .etapa__texto strong { color: var(--e-ok); }

@keyframes etapa-pulso { 0%, 100% { box-shadow: 0 0 0 4px rgba(181, 136, 107, .28); } 50% { box-shadow: 0 0 0 9px rgba(181, 136, 107, .08); } }
@keyframes etapa-pulo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes etapa-vibra { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6px); } }
@media (prefers-reduced-motion: reduce) { .etapa--atual .etapa__marca i, .etapa--atual .etapa__icone, .etapa--atual .etapa-roda { animation: none; } }

@media (max-width: 520px) {
    .etapas { --e-icone: 64px; }
    .etapa { grid-template-columns: 1fr 22px var(--e-icone); column-gap: .6rem; min-height: 92px; }
    .etapa__texto strong { font-size: 1.08rem; }
    .etapa__texto span { font-size: .78rem; }
}

/* ---------- Modo compacto (painel): uma linha so, espacada, com trilho que vai enchendo ---------- */
.etapas--compacto { --e-icone: 46px; display: flex; flex-wrap: nowrap; justify-content: space-between; margin: .4rem 0 1.2rem; padding: 10px 8px .5rem; overflow-x: auto; overflow-y: hidden; }
.etapas--compacto .etapa { flex: 1 0 92px; display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: .5rem; min-height: 0; text-align: center; position: relative; }
.etapas--compacto .etapa__marca { display: none; }
.etapas--compacto .etapa__texto { text-align: center; padding: 0 .15rem; }
.etapas--compacto .etapa__texto strong { font-family: inherit; font-size: .74rem; font-weight: 500; line-height: 1.25; display: block; }
.etapas--compacto .etapa__texto span, .etapas--compacto .etapa__agora { display: none; }
.etapas--compacto .etapa__texto time { font-size: .66rem; margin-top: .2rem; }
.etapas--compacto .etapa__icone { position: relative; z-index: 1; }
.etapas--compacto .etapa--feito .etapa__icone { box-shadow: 0 0 0 2px #1A1A1A; }
.etapas--compacto .etapa--atual .etapa__icone { box-shadow: 0 0 0 3px #B5886B; animation: none; }

/* trilho entre um icone e o proximo; enche (preto) conforme o pedido avanca e termina em seta */
.etapas--compacto .etapa:not(.etapa--ultima)::before { content: ''; position: absolute; z-index: 0; height: 4px; border-radius: 2px; top: calc(var(--e-icone) / 2 - 2px);
    left: calc(50% + var(--e-icone) / 2 + 6px); width: calc(100% - var(--e-icone) - 12px); background: var(--e-linha); }
.etapas--compacto .etapa--feito:not(.etapa--ultima)::before { background: var(--e-feito); }
.etapas--compacto .etapa--atual:not(.etapa--ultima)::before { background: linear-gradient(to right, var(--e-feito) 0, var(--e-feito) 45%, var(--e-linha) 45%); }
/* ponta de seta no fim do trecho preenchido */
.etapas--compacto .etapa--feito:not(.etapa--ultima)::after,
.etapas--compacto .etapa--atual:not(.etapa--ultima)::after { content: ''; position: absolute; z-index: 0; width: 0; height: 0; border-left: 9px solid var(--e-feito); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
    top: calc(var(--e-icone) / 2 - 6px); }
.etapas--compacto .etapa--feito:not(.etapa--ultima)::after { left: calc(50% + var(--e-icone) / 2 + 6px + (100% - var(--e-icone) - 12px) - 9px); }
.etapas--compacto .etapa--atual:not(.etapa--ultima)::after { left: calc(50% + var(--e-icone) / 2 + 6px + (100% - var(--e-icone) - 12px) * .45 - 2px); }

/* ---------- Historico (painel): lista de eventos do pedido ---------- */
.historico { list-style: none; margin: .6rem 0 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--a-linha, #E4DED6); display: grid; gap: .8rem; }
.historico__item { position: relative; display: grid; gap: .1rem; font-size: .9rem; line-height: 1.4; }
.historico__item::before { content: ''; position: absolute; left: -1.5rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: #B9B3AB; border: 2px solid #fff; }
.historico__item--ok::before { background: #3E7C5A; }
.historico__item--alerta::before { background: #B3473F; }
.historico__quando { font-size: .72rem; letter-spacing: .04em; color: #8F8A84; font-variant-numeric: tabular-nums; }
.historico__auto { font-style: normal; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; background: #E4ECF5; color: #2F5A8A; padding: .1rem .45rem; border-radius: 999px; margin-right: .2rem; }