/* DereXpres - seguimiento de pedido/envio */
.dx-track, .dx-track-form {
  background: #fff;
  border: 1px solid var(--dx-line);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 24px;
}
.dx-track__title { font-size: 22px; margin: 0 0 14px; }
.dx-track__items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.dx-track__item { display: flex; align-items: center; gap: 12px; }
.dx-track__thumb { flex: 0 0 56px; width: 56px; height: 56px; border: 1px solid var(--dx-line); border-radius: 8px; overflow: hidden; background: #fff; }
.dx-track__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dx-track__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dx-track__qty { color: var(--dx-mute); font-weight: 600; }

.dx-track__steps { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: none; }
.dx-track__steps li { position: relative; text-align: center; font-size: 13px; color: var(--dx-mute); padding-top: 26px; }
.dx-track__steps li::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 3px; background: var(--dx-line); z-index: 0; }
.dx-track__steps li:first-child::before { display: none; }
.dx-track__dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 3px solid var(--dx-line); z-index: 1; }
.dx-track__steps li.is-done, .dx-track__steps li.is-current { color: var(--dx-ink); font-weight: 600; }
.dx-track__steps li.is-done::before, .dx-track__steps li.is-current::before { background: var(--dx-cyan); }
.dx-track__steps li.is-done .dx-track__dot { background: var(--dx-cyan); border-color: var(--dx-cyan); }
.dx-track__steps li.is-current .dx-track__dot { border-color: var(--dx-cyan); box-shadow: 0 0 0 4px #00c6d633; }

.dx-track__status { margin: 0 0 8px; }
.dx-track__status.is-issue, .dx-track__status.is-returned { color: #9a3b00; }
.dx-track__status.is-cancelled { color: #a40000; }
.dx-track__guide { margin: 0 0 14px; color: var(--dx-mute); line-height: 1.6; }
.dx-track__guide strong { color: var(--dx-ink); }
.dx-track__note { margin: 0; color: var(--dx-mute); }
.dx-track__small { margin: 12px 0 0; font-size: 12px; color: var(--dx-mute); }
.dx-track__pdf { display: inline-block; }

.dx-track-form { display: grid; gap: 14px; max-width: 460px; }
.dx-track-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.dx-track-form input { min-height: 46px; border: 1px solid var(--dx-line); border-radius: 8px; padding: 10px 12px; }
.dx-track__error { background: #fff3f3; border: 1px solid #f1b5b5; border-radius: 8px; padding: 10px 12px; color: #8a1f1f; max-width: 460px; }

@media (max-width: 480px) {
  .dx-track, .dx-track-form { padding: 14px; }
  .dx-track__steps li { font-size: 11px; }
}