:root{
  /* Site palette (keeps cohesion with the main site) */
  --mdc-accent: #ff0909;
  --mdc-dark: #0f1521;
  --mdc-text: #121212;
  --mdc-muted: #667085;
  --mdc-bg: #f4f5f7;
  --mdc-card: #ffffff;
  --mdc-line: rgba(15,21,33,.12);
  --mdc-good: #16a34a;
  --mdc-bad: #dc2626;

  /* Tie tracking UI rounding to the main site, with sensible fallbacks */
  --mdc-r-card: var(--mdc-radius-card, 14px);
  --mdc-r-input: var(--mdc-radius-input, 10px);
  --mdc-r-pill: var(--mdc-radius-pill, 999px);
  --mdc-shadow: 0 16px 40px rgba(0,0,0,.10);
}

/* Tracking page area */
.mdc-tracking-area{
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,9,9,.10), transparent 60%),
    radial-gradient(900px 520px at 90% 18%, rgba(15,21,33,.10), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--mdc-bg));
  padding: 38px 0 60px;
}

.mdc-tracking{
  color: var(--mdc-text);
}

.mdc-tracking .wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 18px;
}

.mdc-tracking .module{ width:100%; margin-left:auto; margin-right:auto; }

/* Cards */
.mdc-tracking .card,
.mdc-tracking .topbar{
  background: var(--mdc-card);
  border: 1px solid var(--mdc-line);
  border-radius: var(--mdc-r-card);
  box-shadow: var(--mdc-shadow);
}

.mdc-tracking .topbar{
  display:flex;
  align-items:anchor-center;
  justify-content:space-around;
  gap: 16px;
  padding: 18px 18px;
}

.mdc-tracking .title{
  width: 100%;
  text-align: center;      /* centers both lines */
}

.mdc-tracking .title .mdc-link{
  justify-content: center; /* since .mdc-link is inline-flex */
}

@media (max-width: 991px){
  .mdc-tracking .topbar{ flex-direction: column; align-items: stretch; }
}

.mdc-tracking .brand{ display:flex; align-items:center; gap: 12px; }
.mdc-tracking .logo{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(15,21,33,.10);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.mdc-tracking .logo img{ width:100%; height:100%; object-fit:contain; padding:8px; }

.mdc-tracking .title strong{ display:block; font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.mdc-tracking .title span{ display:block; font-size: 12px; color: var(--mdc-muted); margin-top: 2px; }

/* Form */
.mdc-tracking label{ font-size: 12px; color: var(--mdc-muted); display:block; margin-bottom: 6px; }
.mdc-tracking input{
  width: 100%;
  height: 44px;
  border-radius: var(--mdc-r-input);
  border: 1px solid rgba(15,21,33,.14);
  background: #fff;
  color: var(--mdc-text);
  padding: 0 12px;
  outline: none;
}
.mdc-tracking input:focus{
  border-color: rgba(9,9,255,.55);
  box-shadow: 0 0 0 4px rgba(9,9,255,.12);
}

.mdc-tracking .form{
  display:grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 12px;
  align-items:end;
}
@media (max-width: 991px){
  .mdc-tracking .form{ grid-template-columns: 1fr; }
}

.mdc-tracking .btn{
  height: 44px;
  border-radius: var(--mdc-r-input);
  padding: 0 14px;
  border: 1px solid rgba(9,27,255,.55);
  background: #000089;
  color:#fff;
  font-weight: 800;
  cursor:pointer;
  grid-column: 1 / -1;   /* span full grid width */
  width: 100%;
}
.mdc-tracking .btn:active{ transform: translateY(1px); }

.mdc-tracking .layout{ display:grid; gap: 14px; margin-top: 14px; }

.mdc-tracking .card{ padding: 16px 18px; }

.mdc-tracking .muted{ color: var(--mdc-muted); }
.mdc-tracking .k{ font-size: 12px; font-weight: 800; letter-spacing: .2px; }
.mdc-tracking .nowrap{ white-space: nowrap; }

.mdc-tracking .msg{
  margin-top: 14px;
  border-radius: var(--mdc-r-card);
  padding: 10px 12px;
  border: 1px solid var(--mdc-line);
  background: rgba(255,255,255,.85);
}
.mdc-tracking .msg.error{
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.08);
}

/* Header wide module */
.mdc-tracking .headerWideTop{ display:grid; gap: 14px; align-items: stretch; }
@media (min-width: 992px){
  .mdc-tracking .headerWideTop{ grid-template-columns: 3fr 9fr; }
}
.mdc-tracking .guide{ font-size: 22px; font-weight: 900; letter-spacing: .3px; }

.mdc-tracking .pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border-radius: var(--mdc-r-pill);
  padding: 8px 12px;
  border: 1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.08);
  font-weight: 800;
}

.mdc-tracking .kvs{ display:grid; gap: 10px; }
@media (min-width: 992px){
  .mdc-tracking .kvs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mdc-tracking .kv{
  border: 1px solid rgba(15,21,33,.10);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
.mdc-tracking .kv .v{ font-weight: 700; margin-top: 2px; }

/* Progress (DHL-ish) — animated line + dots (restored) */
.mdc-tracking .progressDhlWrap{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,21,33,.12);
}

.mdc-tracking .progressDhl{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 10px 8px 2px;

  /* Line colors (done → current) */
  --p-track: rgba(15,21,33,.14);
  --p-current: rgba(245,158,11,.78);
  --p-done: rgba(22,163,74,.82);
  --p-done-strong: rgba(22,163,74,.92);

  /* Liquid-like blend controls */
  --blend-mid-base: 50%;
  --blend-mid-delta: 1.5%;
  --blend-zone-base: 20px;

  --blend-mid: var(--blend-mid-base);
  --blend-zone: var(--blend-zone-base);
}

/* Background track line (behind the dots) */
.mdc-tracking .progressDhl::before{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  top: 32px;
  height: 4px;
  border-radius: 999px;
  background: var(--p-track);
  z-index: 0;
}

/* --- Animated gradient “blend” properties (Chromium/Safari) --- */
@property --blend-mid{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --blend-zone{
  syntax: '<length>';
  inherits: false;
  initial-value: 18px;
}

/* Midpoint "sloshes" */
@keyframes mdcBlendMidWave{
  0%   { --blend-mid: calc(var(--blend-mid-base) - var(--blend-mid-delta)); }
  25%  { --blend-mid: calc(var(--blend-mid-base) + var(--blend-mid-delta)); }
  100% { --blend-mid: calc(var(--blend-mid-base) - var(--blend-mid-delta)); }
}
/* Zone expands/contracts */
@keyframes mdcBlendZoneWave{
  0%   { --blend-zone: calc(var(--blend-zone-base) * 0.75); }
  50%  { --blend-zone: calc(var(--blend-zone-base) * 1.25); }
  100% { --blend-zone: calc(var(--blend-zone-base) * 0.75); }
}

@media (prefers-reduced-motion: reduce){
  .mdc-tracking .progressDhl[data-stage="2"]::after,
  .mdc-tracking .progressDhl[data-stage="3"]::after{
    animation: none !important;
  }
}

/* Filled line up to current stage */
.mdc-tracking .progressDhl[data-stage="1"]::after,
.mdc-tracking .progressDhl[data-stage="2"]::after,
.mdc-tracking .progressDhl[data-stage="3"]::after,
.mdc-tracking .progressDhl[data-stage="4"]::after{
  content:"";
  position:absolute;
  left: 8%;
  top: 32px;
  height: 4px;
  border-radius: 999px;
  background: var(--p-current);
  z-index: 0;
}

.mdc-tracking .progressDhl[data-stage="1"]::after{ right: calc(8% + 75%); }
.mdc-tracking .progressDhl[data-stage="2"]::after{ right: calc(8% + 50%); }
.mdc-tracking .progressDhl[data-stage="3"]::after{ right: calc(8% + 25%); }
.mdc-tracking .progressDhl[data-stage="4"]::after{ right: 8%; }

/* Stage 1: just current */
.mdc-tracking .progressDhl[data-stage="1"]::after{
  background: var(--p-current);
}

/* Stage 2/3: done (green) → current (red), with animated blend */
.mdc-tracking .progressDhl[data-stage="2"]{
  --blend-mid-base: 60%;
  --blend-mid-delta: 3.5%;
  --blend-zone-base: 60px;
}
.mdc-tracking .progressDhl[data-stage="2"]::after{
  background: linear-gradient(90deg,
    var(--p-done) 0%,
    var(--p-done) calc(var(--blend-mid) - (var(--blend-zone) * 0.5)),
    var(--p-current) calc(var(--blend-mid) + (var(--blend-zone) * 0.5)),
    var(--p-current) 100%
  );
  animation:
    mdcBlendMidWave 2600ms infinite linear,
    mdcBlendZoneWave 1800ms infinite ease-in-out;
}

.mdc-tracking .progressDhl[data-stage="3"]{
  --blend-mid-base: 80%;
  --blend-mid-delta: 3.5%;
  --blend-zone-base: 60px;
}
.mdc-tracking .progressDhl[data-stage="3"]::after{
  background: linear-gradient(90deg,
    var(--p-done) 0%,
    var(--p-done) calc(var(--blend-mid) - (var(--blend-zone) * 0.5)),
    var(--p-current) calc(var(--blend-mid) + (var(--blend-zone) * 0.5)),
    var(--p-current) 100%
  );
  animation:
    mdcBlendMidWave 2600ms infinite linear,
    mdcBlendZoneWave 1800ms infinite ease-in-out;
}

/* Stage 4: complete (all green) */
.mdc-tracking .progressDhl[data-stage="4"]::after{
  background: var(--p-done-strong);
}

/* Steps */
.mdc-tracking .pStep{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  gap: 10px;
  z-index: 1; /* above the line */
}

.mdc-tracking .pDot{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  background: #fff;
  border: 1.5px solid rgba(15,21,33,.18);
  color: var(--mdc-dark);
  z-index: 2;
}

.mdc-tracking .pDot svg{ width: 22px; height: 22px; }
.mdc-tracking .pStep.pending .pDot svg{ opacity: .6; }
.mdc-tracking .pStep.current .pDot svg{ opacity: 1; }
.pStep.done .pDot svg{ opacity: 1; stroke: #82ff5ab0;}

.mdc-tracking .pStep.current .pDot svg{
  animation: mdcIconPulse 1.4s ease-in-out infinite;
}
@keyframes mdcIconPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

.mdc-tracking .pLabel{ font-weight: 600; font-size: 13px; }
.mdc-tracking .pSub{
  font-size: 12px;
  color: var(--mdc-muted);
  margin-top: -6px;
}

/* State styling */
.pStep.done .pDot{
  border-color: rgba(5,134,24);
  background: #005619;
  border-width: 3px;          /* pick 2px, 3px, 4px */
  border-style: solid;        /* ensure it’s solid */
}

.mdc-tracking .pStep.current .pDot{
  border-color: rgba(245,158,11,.75);
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(255,200,0,.40);
  color: #fff;
}

/* When complete (Entregada), final dot becomes green too */
.mdc-tracking .progressDhl[data-stage="4"] .pStep.current .pDot{
  border-color: rgba(22,163,74,.55);
  background: rgba(22,163,74,.92);
  box-shadow: 0 0 0 4px rgba(22,163,74,.14);
  color: #0f1521;
}
.mdc-tracking .progressDhl[data-stage="4"] .pStep.current .pDot svg{
  animation: none;
}

/* Pending style */
.mdc-tracking .pStep.pending .pDot{
  background: rgba(237,237,237);
  border-color: rgba(15,21,33,.16);
  color: rgba(102,102,102);
}

/* Mobile: stack progress as cards, hide the connecting line */
/* Mobile: vertical progress bar (timeline style) */
@media (max-width: 575px){

  /* Stack steps vertically */
  .mdc-tracking .progressDhl{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0 0;
    --p-fill: 0; /* 0..1 how much of the bar is filled */
  }

  /* How much of the vertical bar is filled by stage (1..4) */
  .mdc-tracking .progressDhl[data-stage="1"]{ --p-fill: 0; }
  .mdc-tracking .progressDhl[data-stage="2"]{ --p-fill: 0.3333; }
  .mdc-tracking .progressDhl[data-stage="3"]{ --p-fill: 0.6667; }
  .mdc-tracking .progressDhl[data-stage="4"]{ --p-fill: 1; }

  /* Vertical track line */
  .mdc-tracking .progressDhl::before{
    display: block;
    left: 15px;                 /* center of 34px dot */
    right: auto;
    top: 17px;
    width: 4px;
    height: calc(100% - 34px);  /* from first dot center to last dot center */
  }

  /* Vertical filled line (scaled by stage) */
  .mdc-tracking .progressDhl[data-stage="1"]::after,
  .mdc-tracking .progressDhl[data-stage="2"]::after,
  .mdc-tracking .progressDhl[data-stage="3"]::after,
  .mdc-tracking .progressDhl[data-stage="4"]::after{
    display: block;
    left: 15px;
    right: auto;
    top: 17px;
    width: 4px;
    height: calc(100% - 34px);
    transform-origin: top;
    transform: scaleY(var(--p-fill));
  }

  /* If you want to keep the “blend” feel on stage 2/3, rotate the gradient vertical */
  .mdc-tracking .progressDhl[data-stage="2"]::after,
  .mdc-tracking .progressDhl[data-stage="3"]::after{
    background: linear-gradient(180deg,
      var(--p-done) 0%,
      var(--p-done) calc(var(--blend-mid) - (var(--blend-zone) * 0.5)),
      var(--p-current) calc(var(--blend-mid) + (var(--blend-zone) * 0.5)),
      var(--p-current) 100%
    );
  }

  /* Turn each step into a clean two-line row (dot left, text right) */
  .mdc-tracking .pStep{
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    text-align: left;

    padding: 2px 0;
    background: transparent;
    border: none;
  }

  .mdc-tracking .pDot{
    width: 34px;
    height: 34px;
    grid-row: 1 / span 2;
    grid-column: 1;
  }

  .mdc-tracking .pLabel{ grid-column: 2; padding-top:5px}
  .mdc-tracking .pSub{ grid-column: 2; margin-top: 0; }

  .mdc-tracking .pDot svg{ width: 18px; height: 18px; }
}

/* Delivery extra row (injected by JS) */
.mdc-tracking .deliveryInfo{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15,21,33,.12);
  color: var(--mdc-text);
}
.mdc-tracking .deliveryItem .label{ color: var(--mdc-muted); font-weight: 800; font-size: 12px; }
.mdc-tracking .deliveryItem .value{ margin-left: 6px; font-weight: 900; }
.mdc-tracking .sep{ color: rgba(15,21,33,.30); font-weight: 900; }

/* Events table */
.mdc-tracking table{ width:100%; border-collapse: collapse; margin-top: 10px; }
.mdc-tracking th,
.mdc-tracking td{ padding: 10px 8px; border-bottom: 1px solid rgba(15,21,33,.10); vertical-align: top; }
.mdc-tracking thead th{ font-size: 12px; color: var(--mdc-muted); text-transform: uppercase; letter-spacing: .4px; }

/* Hint */
.mdc-tracking .hint{ background: rgba(255,255,255,.75); }