#jb-tracking {
  --jb-blue: #2f5bf5;
  --jb-blue-d: #244bd8;
  --jb-ink: #17181c;
  --jb-muted: #8b8f98;
  --jb-line: #e6e8ec;
  font-family: 'HelveticaNowText', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--jb-ink);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 52px;
  box-sizing: border-box;
}
#jb-tracking *, #jb-tracking *::before, #jb-tracking *::after { box-sizing: border-box; }
#jb-tracking svg { width: 100%; height: 100%; display: block; }

/* ---------- Hero azul ---------- */
.jb-hero {
  background: linear-gradient(120deg, #2f5bf5 0%, #4d76f8 100%);
  border-radius: 20px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 44px;
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(47, 91, 245, .55);
}
.jb-hero-search h2 { font-size: 31px; font-weight: 600; margin: 0 0 28px; color: #fff; }
#jb-form { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.jb-field { flex: 1 1 185px; }
.jb-field label { display: block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82); margin-bottom: 8px; }
.jb-field input {
  width: 100%; height: 52px; padding: 0 15px; font-size: 16px; font-family: inherit;
  border: none; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff;
}
.jb-field input::placeholder { color: rgba(255,255,255,.6); }
.jb-field input:focus { outline: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.22); }
#jb-submit {
  flex: 0 0 auto; height: 52px; margin: 0; background: #fff; color: var(--jb-blue-d);
  font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: .04em;
  border: none; border-radius: 30px; padding: 0 34px; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease; white-space: nowrap;
}
#jb-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
#jb-submit:disabled { opacity: .6; cursor: default; transform: none; }

.jb-hero-client { border-left: 1px solid rgba(255,255,255,.22); padding-left: 44px; }
.jb-hero-client h3 { font-size: 20px; font-weight: 600; margin: 0 0 18px; color: #fff; }
.jb-client-row { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.92); }
.jb-ci { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; color: rgba(255,255,255,.75); }

/* ---------- Resultado ---------- */
#jb-result { margin-top: 40px; }
.jb-loading, .jb-error { text-align: center; padding: 34px; font-size: 17px; }
.jb-error { color: #d33; }

.jb-grid { display: grid; grid-template-columns: 390px 1fr; gap: 52px; align-items: start; }

/* Tarjeta de estado */
.jb-status-card { border: 1px solid var(--jb-line); border-radius: 15px; padding: 26px; }
.jb-status-main { display: flex; gap: 15px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--jb-line); margin-bottom: 20px; }
.jb-status-ic { flex: 0 0 27px; width: 27px; height: 27px; color: var(--jb-blue); }
.jb-status-label { font-size: 20px; font-weight: 600; color: var(--jb-blue); }
.jb-status-date { font-size: 18px; font-weight: 600; color: var(--jb-ink); margin-top: 3px; }
.jb-status-meta { display: flex; flex-direction: column; gap: 18px; }
.jb-meta { display: flex; gap: 13px; align-items: center; }
.jb-meta-ic { flex: 0 0 22px; width: 22px; height: 22px; color: var(--jb-muted); }
.jb-meta-k { display: block; font-size: 13px; color: var(--jb-muted); }
.jb-meta-v { display: block; font-size: 16px; font-weight: 600; }

/* Resumen productos */
#jb-tracking .jb-summary-title { font-size: 22px; font-weight: 600; margin: 34px 0 18px !important; }
.jb-prod-list { list-style: none; margin: 0; padding: 0; }
.jb-prod { display: flex; gap: 16px; align-items: center; padding: 14px 0; }
.jb-prod img, .jb-prod-ph { width: 74px; height: 74px; border-radius: 12px; background: #f3f4f6; object-fit: cover; flex: 0 0 74px; }
.jb-prod-ph { display: flex; align-items: center; justify-content: center; padding: 20px; color: #c2c6cd; }
.jb-prod-title { display: block; font-size: 16px; font-weight: 500; }
.jb-prod-variant { display: block; font-size: 14px; color: var(--jb-muted); margin-top: 3px; }

/* ---------- Timeline vertical ---------- */
/* La bola y la línea van dentro del mismo "raíl" flex centrado (align-items:center),
   así comparten el MISMO centro horizontal por definición: no se pueden descuadrar.
   El espaciado vertical lo da el min-height del paso; la línea (::after) crece
   con flex:1 para rellenar hasta la siguiente bola. */
.jb-timeline { list-style: none; margin: 0; padding: 0; }
.jb-step { position: relative; display: grid; grid-template-columns: 100px 52px 1fr; gap: 0; }
.jb-step:not(.jb-last) { min-height: 74px; }

.jb-step-date { text-align: right; padding-top: 3px; padding-right: 8px; }
.jb-step-date .jb-d { display: block; font-size: 14px; font-weight: 600; }
.jb-step-date .jb-t { display: block; font-size: 13px; color: var(--jb-muted); }
.jb-todo .jb-step-date .jb-d { color: var(--jb-muted); font-weight: 500; }

/* raíl: columna flex centrada que contiene la bola y, debajo, la línea */
.jb-step-rail { display: flex; flex-direction: column; align-items: center; }
.jb-step:not(.jb-last) .jb-step-rail::after {
  content: ''; flex: 1 1 auto; width: 2px; min-height: 18px; margin-top: 3px; background: var(--jb-blue);
}
.jb-step.jb-todo .jb-step-rail::after { width: 0; background: transparent; border-left: 2px dashed var(--jb-line); }

/* bola */
.jb-step-node {
  flex: 0 0 auto; margin-top: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--jb-blue);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.jb-step.jb-todo .jb-step-node { background: #fff; border: 2px solid var(--jb-line); }
.jb-step.jb-active .jb-step-node { width: 46px; height: 46px; box-shadow: 0 0 0 5px rgba(47,91,245,.14); }
/* icono dentro del nodo activo: regla con ID para ganar a "#jb-tracking svg { width:100% }" */
#jb-tracking .jb-step.jb-active .jb-step-node svg { width: 22px; height: 22px; }

.jb-step-body { padding: 2px 0 12px 16px; }
.jb-step-title { font-size: 16px; font-weight: 500; }
.jb-step.jb-active .jb-step-title { font-size: 22px; font-weight: 600; }
.jb-step.jb-todo .jb-step-title { color: var(--jb-muted); }
.jb-step-desc { font-size: 16px; color: #6c7078; line-height: 1.55; margin-top: 9px; max-width: 500px; }
.jb-step-desc a { color: var(--jb-blue); text-decoration: underline; }

.jb-help { text-align: center; margin-top: 44px; font-size: 15px; color: var(--jb-muted); }
.jb-help a { color: var(--jb-blue); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .jb-hero { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; }
  .jb-grid { grid-template-columns: 1fr; gap: 38px; }
  #jb-tracking .jb-summary-title { margin-top: 40px !important; }
  /* Datos del cliente compacto en móvil/tablet */
  .jb-hero-client { border-left: none; border-top: 1px solid rgba(255,255,255,.22); padding-left: 0; padding-top: 18px; }
  .jb-hero-client h3 { font-size: 16px; margin-bottom: 12px; }
  .jb-client-row { font-size: 14px; margin-bottom: 9px; gap: 10px; }
  .jb-ci { flex: 0 0 18px; width: 18px; height: 18px; }
}
@media (max-width: 560px) {
  /* Tarjeta azul más compacta en móvil */
  .jb-hero { padding: 22px 20px; gap: 16px; border-radius: 16px; }
  .jb-hero-search h2 { font-size: 21px; margin-bottom: 16px; }
  #jb-form { gap: 12px; }
  .jb-field label { font-size: 13px; margin-bottom: 6px; }
  .jb-field input { height: 46px; font-size: 15px; }
  #jb-submit { height: 46px; flex: 1 1 100%; margin-top: 2px; }
  .jb-hero-client { padding-top: 14px; }
  .jb-hero-client h3 { font-size: 15px; margin-bottom: 8px; }
  .jb-client-row { font-size: 13px; margin-bottom: 6px; }
  .jb-ci { flex: 0 0 16px; width: 16px; height: 16px; }
  /* Timeline */
  .jb-step { grid-template-columns: 74px 52px 1fr; }
  .jb-step.jb-active .jb-step-title { font-size: 20px; }
}