/* Order pages (pedido.html, mi-pedido.html). Reuses the landing tokens from styles.css. */
.ped { max-width: 640px; margin: 0 auto; padding: 8px max(var(--gutter), env(safe-area-inset-left, 0px)) 48px; }
.ped h1 { margin-bottom: 12px; }
.ped h1:focus { outline: none; }
.ped .lead { margin-bottom: 20px; }
.ped-note { color: var(--muted); font-size: 0.9rem; padding-block: 8px; }
.foot .ped-note { padding-block: 24px; }
.ped .back { display: inline-block; margin-bottom: 12px; font-weight: 600; text-underline-offset: 4px; }

.sum { margin-bottom: 24px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.sum h2 { margin-bottom: 8px; font-size: 1.2rem; }
.sum-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.sum-list li { display: flex; justify-content: space-between; gap: 12px; }
.sum-list li span:first-child { color: var(--muted); }
.sum-est { color: var(--muted); }
.sum-price { margin-top: 8px; font: 800 1.8rem/1.1 var(--f-display); }

#form { display: grid; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--fg);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--accent); }
.hint { color: var(--muted); font-size: 0.9rem; }
.form-error { color: var(--fg); background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 10px 12px; border-radius: 8px; }
#submit { cursor: pointer; border: 0; justify-self: start; }
#submit[disabled] { opacity: 0.6; cursor: wait; }

.timeline { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 18px 34px; color: var(--muted); }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--bg);
}
.timeline li::after { content: ""; position: absolute; left: 8px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li[data-status="done"] { color: var(--fg); }
.timeline li[data-status="done"]::before { background: var(--accent); border-color: var(--accent); }
.timeline li[data-status="current"] { color: var(--fg); font-weight: 700; }
.timeline li[data-status="current"]::before { border-color: var(--accent); background: var(--accent-soft); }