/* Ñumm — página del pedido: clara, tranquila y con el borde de la bandeja como único adorno. */
.p-order { background: var(--ivory); color: var(--ink); }
.p-order :focus-visible { outline-color: var(--green); }
.p-order .topbar { position: sticky; }
.p-order .topbar__cta { margin-left: auto; }

.order { max-width: 760px; margin: 0 auto; padding: 40px var(--margin) 72px; min-height: calc(100svh - 160px); }
.order__stamp { display: grid; place-items: center; width: 128px; aspect-ratio: 1.42; margin-bottom: 26px; background: var(--maize); clip-path: url(#clip-tray); transition: background-color .4s; }
.order__stamp svg { width: 40px; height: 44px; fill: var(--green); }
.order[data-state="waiting"] .order__stamp svg, .order[data-state="loading"] .order__stamp svg { animation: order-bob 1.4s ease-in-out infinite; }
.order[data-state="live"] .order__stamp { background: var(--green); }
.order[data-state="live"] .order__stamp svg { fill: var(--maize); }
.order[data-state="done"] .order__stamp { background: var(--green); }
.order[data-state="done"] .order__stamp svg { fill: var(--ivory); }
.order[data-state="off"] .order__stamp { background: var(--ivory-2); }
.order[data-state="off"] .order__stamp svg { fill: #8a948e; }
@keyframes order-bob { 50% { transform: translateY(-6px) rotate(-8deg); } }

.order__code { font-size: var(--step-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #4b5a52; }
.order__code strong { color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.order__title { margin-top: 10px; font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem); font-weight: 700; letter-spacing: -.04em; line-height: .95; color: var(--green); text-wrap: balance; }
.order__lead { margin-top: 16px; max-width: 34ch; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; }
.order__lead:empty { display: none; }

.track { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.track[hidden] { display: none; }
.track li { display: grid; align-content: start; gap: 10px; font-size: var(--step-small); font-weight: 600; line-height: 1.2; color: #4f5d55; }
.track i { height: 16px; background: var(--ivory-2); clip-path: url(#clip-tray); transition: background-color .4s; }
.track .is-done { color: var(--green); }
.track .is-done i { background: var(--green); }
.track .is-current { color: var(--green); }
.track .is-current i { background: var(--maize-2); animation: track-pulse 1.6s ease-in-out infinite; }
@keyframes track-pulse { 50% { opacity: .55; } }

.order__card { margin-top: 36px; padding: 24px; border-radius: 22px; background: #fff; }
.order__card[hidden] { display: none; }
.order__card h2 { font-size: var(--step-lead); font-weight: 700; letter-spacing: -.02em; color: var(--green); }
.order__items { margin-top: 14px; display: grid; gap: 8px; }
.order__items li, .order__sum div, .order__meta div { display: flex; justify-content: space-between; gap: 16px; }
.order__items span:last-child, .order__sum dd { font-variant-numeric: tabular-nums; }
.order__sum { margin: 16px 0 0; padding-top: 14px; border-top: 2px solid var(--ivory-2); display: grid; gap: 6px; }
.order__sum dt, .order__meta dt { color: #4b5a52; font-weight: 500; }
.order__sum dd, .order__meta dd { margin: 0; font-weight: 600; text-align: right; }
.order__total { margin-top: 4px; font-size: var(--step-lead); }
.order__total dt { color: var(--green); font-weight: 700; }
.order__total dd { color: var(--green); font-weight: 700; }
.order__meta { margin: 18px 0 0; padding-top: 14px; border-top: 2px solid var(--ivory-2); display: grid; gap: 6px; font-size: var(--step-small); }

.order__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.order__actions[hidden] { display: none; }
/* Lo secundario («No me conviene») va lleno y suave: sin bordes finos, como todos los botones. */
.btn--soft { background: var(--ivory-2); color: var(--green); }
.btn--soft:hover { background: #dfd7c2; }
.order__actions .btn[aria-busy="true"] { cursor: progress; opacity: .8; }
.order__keep { margin-top: 22px; font-size: var(--step-small); font-weight: 500; color: #4b5a52; }
.order__keep[hidden] { display: none; }

.footer--slim { padding-top: 28px; }
.footer--slim .footer__row { margin-top: 0; }
@media (max-width: 520px) { .track li { font-size: .8125rem; } .order__card { padding: 20px; } }