/* cl_ordertracking - estilos de front */

.cl-ot-block {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #f6f8fa;
  border-radius: 8px;
}
.cl-ot-block__inner { max-width: 620px; margin: 0 auto; text-align: center; }
.cl-ot-block__title { margin: 0 0 .25rem; font-size: 1.25rem; }
.cl-ot-block__subtitle { margin: 0 0 1rem; color: #6b7280; }
.cl-ot-block__logged { margin-top: .75rem; font-size: .9rem; }

.cl-ot-form__label { display: block; margin-bottom: .5rem; font-weight: 600; }
.cl-ot-form__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.cl-ot-form__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: .65rem .85rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 1rem;
}
.cl-ot-form__btn { white-space: nowrap; }

/* min-height para que el footer quede abajo aunque el contenido sea corto */
.cl-ot-page { max-width: 820px; margin: 0 auto; min-height: 60vh; }
.cl-ot-page .card { margin-bottom: 1.25rem; }
.cl-ot-search { margin-bottom: 1.5rem; }

/* Stepper / línea de tiempo resumida */
.cl-ot-steps { display: flex; margin: .5rem 0 1.5rem; }
.cl-ot-step { flex: 1 1 0; text-align: center; position: relative; min-width: 0; }
.cl-ot-step__marker { position: relative; height: 34px; display: flex; align-items: center; justify-content: center; }
.cl-ot-step__dot {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e5e7eb; border: 2px solid #e5e7eb; color: #6b7280;
  font-weight: 700; font-size: .9rem;
}
.cl-ot-step__bar {
  position: absolute; z-index: 0; top: 50%; left: 50%;
  width: 100%; height: 3px; background: #e5e7eb; transform: translateY(-50%);
}
.cl-ot-step__label { display: block; margin-top: .45rem; font-size: .82rem; color: #374151; line-height: 1.25; }
.cl-ot-step.is-done .cl-ot-step__dot { background: #16a34a; border-color: #16a34a; color: #fff; }
.cl-ot-step.is-done .cl-ot-step__bar { background: #16a34a; }
.cl-ot-step.is-current .cl-ot-step__dot { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 0 0 4px #bfdbfe; }
.cl-ot-step.is-current .cl-ot-step__label { color: #1d4ed8; font-weight: 600; }
.cl-ot-step.is-pending .cl-ot-step__label { color: #9ca3af; }
.cl-ot-steps--canceled .cl-ot-step__dot { filter: grayscale(1); opacity: .6; }
.cl-ot-steps__note { color: #9a3412; font-weight: 600; margin: -.5rem 0 1rem; }

@media (max-width: 767px) {
  .cl-ot-steps { flex-direction: column; }
  .cl-ot-step { display: flex; align-items: flex-start; text-align: left; gap: .75rem; }
  .cl-ot-step__marker { height: auto; width: 32px; flex: 0 0 32px; }
  .cl-ot-step__bar { top: 32px; left: 50%; transform: translateX(-50%); width: 3px; height: calc(100% - 32px + 14px); }
  .cl-ot-step__label { margin-top: 5px; padding-bottom: 14px; }
  .cl-ot-step:last-child .cl-ot-step__label { padding-bottom: 0; }
}

.cl-ot-order__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.cl-ot-order__ref { margin: 0; font-size: 1.3rem; }
.cl-ot-order__meta { list-style: none; padding: 0; margin: 0; color: #374151; }
.cl-ot-order__meta li { margin: .15rem 0; }

.cl-ot-badge {
  display: inline-block; padding: .25rem .6rem; border-radius: 999px;
  color: #fff; background: #6b7280; font-size: .85rem; font-weight: 600;
}

.cl-ot-highlight {
  margin: .5rem 0 1rem; padding: .75rem 1rem; border-radius: 6px;
  background: #eef2ff; font-weight: 600;
}
.cl-ot-highlight--delivery { background: #fff7ed; color: #9a3412; }
.cl-ot-highlight--delivered { background: #ecfdf5; color: #065f46; }

.cl-ot-timeline { list-style: none; margin: 1rem 0 0; padding: 0; position: relative; }
.cl-ot-timeline__item { position: relative; padding: 0 0 1.1rem 1.75rem; }
.cl-ot-timeline__item:before {
  content: ""; position: absolute; left: 6px; top: 14px; bottom: -4px;
  width: 2px; background: #e5e7eb;
}
.cl-ot-timeline__item:last-child:before { display: none; }
.cl-ot-timeline__dot {
  position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: #9ca3af; border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e5e7eb;
}
.cl-ot-timeline__item.is-current .cl-ot-timeline__dot { background: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
.cl-ot-timeline__item.is-incident .cl-ot-timeline__dot { background: #dc2626; box-shadow: 0 0 0 2px #fecaca; }
.cl-ot-timeline__content { display: flex; flex-direction: column; }
.cl-ot-timeline__label { font-weight: 600; }
.cl-ot-timeline__loc { color: #6b7280; font-size: .9rem; }
.cl-ot-timeline__date { color: #9ca3af; font-size: .85rem; }

.cl-ot-products { margin-top: 1rem; }
.cl-ot-products__title { margin: 0 0 .25rem; font-size: 1rem; }
.cl-ot-table { width: 100%; border-collapse: collapse; }
.cl-ot-table th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
  color: #6b7280; border-bottom: 2px solid #e5e7eb; padding: .5rem .5rem;
}
.cl-ot-table td { padding: .6rem .5rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.cl-ot-table tr:last-child td { border-bottom: 0; }
.cl-ot-ta-c { text-align: center; }
.cl-ot-pname { display: block; font-weight: 600; color: #111827; }
.cl-ot-pref { display: block; font-size: .8rem; color: #9ca3af; margin-top: .1rem; }
.cl-ot-qty {
  display: inline-block; min-width: 1.6rem; padding: .1rem .5rem;
  background: #eef2ff; color: #3730a3; border-radius: 999px; font-weight: 600; font-size: .85rem;
}

.cl-ot-carrier__link { margin-top: 1rem; display: inline-block; }
.cl-ot-muted { color: #9ca3af; }

.cl-ot-mylist__items { list-style: none; padding: 0; margin: 0; }
.cl-ot-mylist__item { border-bottom: 1px solid #eee; }
.cl-ot-mylist__item:last-child { border-bottom: 0; }
.cl-ot-mylist__item a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .25rem; gap: 1rem;
}
.cl-ot-mylist__ref { font-weight: 600; }

@media (max-width: 480px) {
  .cl-ot-form__btn { flex: 1 1 100%; }
}