:root{
  --bg:#071018;
  --bg-2:#0b151f;
  --surface:#ffffff;
  --surface-soft:#f4f7fa;
  --ink:#111b26;
  --muted:#667482;
  --line:#dce4eb;
  --red:#df1d27;
  --red-bright:#f12630;
  --green:#0a8d4b;
  --amber:#d98c0d;
  --blue:#1976d2;
  --shadow:0 28px 80px rgba(8,18,28,.13);
  --radius-xl:28px;
  --radius-lg:20px;
  --container:min(1180px,calc(100% - 36px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);background:#eef3f7;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img,svg{display:block}
.container{width:var(--container);margin-inline:auto}
.site-header{position:absolute;z-index:20;inset:0 0 auto;height:92px;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(4,9,14,.62);backdrop-filter:blur(14px)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;width:230px;max-width:42vw}
.brand img{width:100%;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.28))}
.header-actions{display:flex;align-items:center;gap:18px;color:#fff}
.secure-label{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);font-size:.77rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.secure-label svg{width:19px;height:19px;fill:none;stroke:#45d087;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.header-link{color:rgba(255,255,255,.80);font-size:.84rem;font-weight:800}
.header-whatsapp{padding:11px 16px;border-radius:11px;color:#fff;background:var(--green);box-shadow:0 10px 26px rgba(10,141,75,.24);font-size:.78rem;font-weight:950;text-transform:uppercase}
.tracking-hero{position:relative;min-height:540px;overflow:hidden;color:#fff;background:var(--bg)}
.tracking-hero-bg{position:absolute;inset:0;background:url("hero-tracking.webp") center/cover no-repeat;transform:scale(1.01)}
.tracking-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,14,.98) 0%,rgba(4,9,14,.91) 40%,rgba(4,9,14,.48) 66%,rgba(4,9,14,.30) 100%),linear-gradient(0deg,rgba(4,9,14,.72),transparent 56%)}
.tracking-hero-content{position:relative;z-index:2;padding-top:154px;padding-bottom:68px}
.eyebrow,.card-kicker{display:flex;align-items:center;gap:11px;color:var(--red-bright);font-size:.72rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before,.card-kicker::before{content:"";width:28px;height:3px;border-radius:99px;background:var(--red-bright)}
.tracking-hero h1{max-width:720px;margin:19px 0 16px;font-size:clamp(3rem,6vw,5.6rem);line-height:.94;letter-spacing:-.055em;text-transform:uppercase}
.tracking-hero h1 strong{display:block;color:var(--red-bright)}
.tracking-hero-content>p{max-width:630px;margin:0;color:rgba(255,255,255,.70);font-size:1.05rem}
.tracking-search{max-width:790px;margin-top:32px}
.tracking-search>label{display:block;margin-bottom:8px;color:rgba(255,255,255,.80);font-size:.72rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.tracking-search-row{position:relative;display:flex;gap:10px;padding:7px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.10);box-shadow:0 20px 48px rgba(0,0,0,.22);backdrop-filter:blur(14px)}
.search-icon{position:absolute;z-index:2;left:24px;top:50%;transform:translateY(-50%);color:#7a8793;pointer-events:none}
.search-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.tracking-search input{min-width:0;flex:1;height:56px;padding:0 18px 0 53px;border:0;border-radius:11px;outline:0;color:var(--ink);background:#fff;font-size:1.06rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.tracking-search input:focus{box-shadow:0 0 0 3px rgba(241,38,48,.20)}
.tracking-search button{min-width:180px;padding:0 19px;display:flex;align-items:center;justify-content:center;gap:13px;border:0;border-radius:11px;color:#fff;background:var(--red);font-size:.78rem;font-weight:950;text-transform:uppercase;transition:.2s}
.tracking-search button:hover{transform:translateY(-1px);background:var(--red-bright)}
.tracking-search button b{font-size:1.15rem}
.tracking-search>small{display:block;margin-top:9px;color:rgba(255,255,255,.53)}
.tracking-content{position:relative;padding:34px 0 88px}
.page-has-result .tracking-content{margin-top:-18px}
.shipment-overview,.progress-card,.history-card,.support-card,.security-card,.welcome-card,.help-card,.state-card{border:1px solid rgba(214,224,233,.92);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow)}
.shipment-overview{position:relative;z-index:3;padding:30px;overflow:hidden}
.shipment-overview::before{content:"";position:absolute;right:-90px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(223,29,39,.09),transparent 66%);pointer-events:none}
.shipment-topline{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:30px}
.shipment-code-wrap>span{color:var(--muted);font-size:.69rem;font-weight:900;letter-spacing:.10em;text-transform:uppercase}
.shipment-code-row{display:flex;align-items:center;gap:12px;margin-top:5px}
.shipment-code-row h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.03em}
.icon-button,.action-button{border:1px solid var(--line);background:#fff;color:#53616e}
.icon-button{width:38px;height:38px;display:grid;place-items:center;border-radius:10px}
.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.shipment-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.status-badge{padding:9px 13px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-size:.72rem;font-weight:950;letter-spacing:.05em;text-transform:uppercase}
.status-badge i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 13%,transparent)}
.status-route{color:#1556c0;background:#e6efff}.status-success{color:#087a40;background:#e5f7ed}.status-warning{color:#a56200;background:#fff1d9}.status-danger{color:#b2131c;background:#fde8e9}.status-neutral{color:#53616e;background:#edf2f5}
.action-button{min-height:40px;padding:9px 12px;display:flex;align-items:center;gap:7px;border-radius:10px;font-size:.72rem;font-weight:850}
.action-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.route-display{position:relative;margin:32px 0 26px;padding:25px 26px;display:grid;grid-template-columns:minmax(145px,.75fr) minmax(220px,1.5fr) minmax(145px,.75fr);align-items:center;gap:25px;border:1px solid #e1e8ee;border-radius:20px;background:linear-gradient(135deg,#f8fafc,#f1f5f8)}
.route-place span{display:block;color:#76838f;font-size:.66rem;font-weight:900;letter-spacing:.10em;text-transform:uppercase}
.route-place strong{display:block;margin-top:4px;font-size:1.35rem;line-height:1.15}
.route-destination{text-align:right}
.route-line{position:relative;height:44px;display:flex;align-items:center}
.route-track{position:absolute;left:10px;right:10px;height:4px;border-radius:99px;background:#d6e0e8;overflow:hidden}
.route-track i{display:block;width:var(--route-progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),#ed9d22,var(--green))}
.route-dot{position:absolute;z-index:2;width:15px;height:15px;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--red);background:var(--red)}
.route-dot.start{left:2px}.route-dot.end{right:2px;box-shadow:0 0 0 2px var(--green);background:var(--green)}
.route-truck{position:absolute;z-index:3;left:clamp(0px,calc(var(--route-progress) - 20px),calc(100% - 40px));top:5px;width:40px;height:32px;padding:6px;border-radius:9px;color:#fff;background:var(--red);box-shadow:0 8px 18px rgba(223,29,39,.24);transition:left .5s ease}
.route-truck svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shipment-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metric-card{padding:15px;display:flex;align-items:center;gap:12px;border:1px solid #e2e8ed;border-radius:15px;background:#fff}
.metric-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;color:var(--red);background:#fff0f1}
.metric-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.metric-card small{display:block;color:#798590;font-size:.63rem;font-weight:850;text-transform:uppercase}
.metric-card b{display:block;margin-top:3px;font-size:.88rem}
.progress-card{margin-top:18px;padding:28px 30px}
.section-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.section-heading-row h2{margin:7px 0 0;font-size:1.7rem;line-height:1.1}
.last-update{color:#71808d;font-size:.75rem}
.progress-steps{position:relative;margin-top:30px;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.progress-steps::before{content:"";position:absolute;z-index:0;left:8%;right:8%;top:20px;height:3px;background:#dfe7ed}
.progress-step{position:relative;z-index:1;text-align:center}
.progress-marker{width:42px;height:42px;margin:0 auto 12px;display:grid;place-items:center;border:5px solid #fff;border-radius:50%;color:#8b98a3;background:#dfe7ed;box-shadow:0 0 0 1px #d4dee6;font-size:.72rem;font-weight:950}
.progress-marker svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.progress-step.completed .progress-marker{color:#fff;background:var(--green);box-shadow:0 0 0 1px var(--green)}
.progress-step.current .progress-marker{color:#fff;background:var(--red);box-shadow:0 0 0 1px var(--red),0 0 0 7px rgba(223,29,39,.10)}
.progress-step b{display:block;font-size:.80rem}.progress-step small{display:block;max-width:130px;margin:4px auto 0;color:#85919b;font-size:.66rem}
.cancelled-message{margin-top:25px;padding:16px;border-left:4px solid var(--red);border-radius:11px;color:#a5141c;background:#fff0f1}
.details-grid{margin-top:18px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:18px;align-items:start}
.history-card{padding:28px 30px}
.history-timeline{margin-top:27px}
.history-item{position:relative;display:grid;grid-template-columns:34px 1fr;gap:16px}
.history-item:not(:last-child){padding-bottom:24px}
.history-marker{position:relative;display:flex;justify-content:center}
.history-marker::after{content:"";position:absolute;top:19px;bottom:-5px;width:2px;background:#dfe6ec}
.history-item:last-child .history-marker::after{display:none}
.history-marker span{position:relative;z-index:2;width:16px;height:16px;margin-top:4px;border:4px solid #fff;border-radius:50%;background:#aab6c0;box-shadow:0 0 0 2px #cfd8df}
.history-item.latest .history-marker span{background:var(--red);box-shadow:0 0 0 2px var(--red),0 0 0 7px rgba(223,29,39,.09)}
.history-body{padding:0 0 20px;border-bottom:1px solid #edf1f4}
.history-item:last-child .history-body{border-bottom:0}
.history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.history-head h3{margin:0;font-size:1rem}.history-head time{display:block;margin-top:3px;color:#7d8994;font-size:.72rem}
.latest-label{padding:6px 8px;border-radius:999px;color:#b1111a;background:#fff0f1;font-size:.60rem;font-weight:950;text-transform:uppercase}
.history-body p{margin:10px 0 0;color:#53616e}
.empty-history{margin-top:24px;padding:20px;border:1px dashed #cfd9e1;border-radius:15px;background:#f8fafb}.empty-history span{font-weight:900}.empty-history p{margin:4px 0 0;color:#6d7a86}
.support-column{display:grid;gap:18px}
.support-card{padding:27px;background:linear-gradient(145deg,#111c27,#081018);color:#fff;border-color:rgba(255,255,255,.07)}
.support-card h2{margin:14px 0 9px;font-size:1.8rem}.support-card p{margin:0;color:rgba(255,255,255,.65)}
.support-whatsapp,.support-home{min-height:49px;margin-top:18px;padding:12px 15px;display:flex;align-items:center;justify-content:center;border-radius:11px;font-size:.72rem;font-weight:950;text-transform:uppercase}
.support-whatsapp{color:#fff;background:var(--green)}.support-home{margin-top:9px;color:#fff;border:1px solid rgba(255,255,255,.15)}
.security-card{padding:20px;display:flex;align-items:flex-start;gap:14px}.security-icon{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:13px;color:var(--green);background:#e8f7ef}.security-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.security-card b{font-size:.9rem}.security-card p{margin:4px 0 0;color:#71808d;font-size:.78rem}
.state-card{padding:28px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}.state-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;color:#fff;background:var(--red);font-size:1.4rem;font-weight:950}.state-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.state-card span{color:var(--red);font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.state-card h2{margin:5px 0;font-size:1.6rem}.state-card p{margin:0;color:#687681}.state-card>a{padding:12px 15px;border-radius:10px;color:#fff;background:var(--green);font-size:.72rem;font-weight:950;text-transform:uppercase}.state-error .state-icon{background:#a5161e}
.welcome-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:18px}.welcome-card,.help-card{padding:30px}.welcome-card h2{max-width:600px;margin:13px 0 11px;font-size:2.2rem}.welcome-card>p,.help-card p{color:#687681}.welcome-features{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.welcome-features div{padding:15px;border-radius:13px;background:#f4f7f9}.welcome-features b{display:block;color:var(--red);font-size:.75rem}.welcome-features span{display:block;margin-top:4px;font-size:.78rem;font-weight:850}.help-card{color:#fff;background:linear-gradient(145deg,#111c27,#081018);border-color:rgba(255,255,255,.07)}.help-card>span{color:var(--red-bright);font-size:.68rem;font-weight:950;text-transform:uppercase}.help-card h3{margin:10px 0 8px;font-size:1.6rem}.help-card p{color:rgba(255,255,255,.63)}.help-card a{margin-top:18px;padding:12px 15px;display:flex;justify-content:center;border-radius:11px;color:#fff;background:var(--green);font-size:.72rem;font-weight:950;text-transform:uppercase}
.site-footer{padding:35px 0;color:#fff;background:#050b10;border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-inner>div:first-child{display:flex;align-items:center;gap:20px}.footer-inner img{width:175px}.footer-inner p{margin:0;color:rgba(255,255,255,.58);font-size:.75rem}.footer-data{display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.65);font-size:.76rem}.footer-data a:hover{color:#fff}
.floating-whatsapp{position:fixed;z-index:50;right:20px;bottom:20px;width:58px;height:58px;display:grid;place-items:center;border:4px solid rgba(255,255,255,.75);border-radius:50%;color:#fff;background:var(--green);box-shadow:0 15px 35px rgba(0,0,0,.24);font-size:.72rem;font-weight:950}
.toast{position:fixed;z-index:100;left:50%;bottom:26px;max-width:calc(100% - 30px);padding:11px 15px;transform:translate(-50%,130%);border-radius:10px;color:#fff;background:#111b26;box-shadow:0 12px 35px rgba(0,0,0,.24);font-size:.78rem;font-weight:800;opacity:0;transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:900px){.secure-label,.header-link{display:none}.tracking-hero{min-height:510px}.shipment-topline{flex-direction:column}.shipment-actions{justify-content:flex-start}.route-display{grid-template-columns:1fr;gap:17px}.route-destination{text-align:left}.route-line{order:2}.route-destination{order:3}.shipment-metrics{grid-template-columns:1fr}.details-grid{grid-template-columns:1fr}.progress-steps{grid-template-columns:1fr;gap:0}.progress-steps::before{display:none}.progress-step{min-height:70px;display:grid;grid-template-columns:48px 1fr;align-items:start;text-align:left}.progress-marker{margin:0}.progress-step:not(:last-child)::after{content:"";position:absolute;left:20px;top:42px;bottom:0;width:2px;background:#dfe7ed}.progress-step small{max-width:none;margin:3px 0 0}.welcome-grid{grid-template-columns:1fr}}
@media(max-width:650px){:root{--container:min(100% - 24px,1180px);--radius-xl:21px}.site-header{height:76px}.brand{width:165px}.header-whatsapp{padding:9px 12px;font-size:.65rem}.tracking-hero{min-height:510px}.tracking-hero-content{padding-top:116px;padding-bottom:48px}.tracking-hero h1{font-size:2.75rem}.tracking-hero-content>p{font-size:.95rem}.tracking-search-row{display:block;padding:6px}.tracking-search input{width:100%;height:54px;padding-left:48px}.search-icon{top:34px}.tracking-search button{width:100%;min-height:50px;margin-top:6px}.tracking-content{padding:20px 0 60px}.shipment-overview,.progress-card,.history-card{padding:21px}.shipment-actions{width:100%}.status-badge{width:100%;justify-content:center}.action-button{flex:1;justify-content:center}.shipment-code-row h2{font-size:2rem}.route-display{padding:20px}.route-place strong{font-size:1.18rem}.section-heading-row{align-items:flex-start;flex-direction:column}.last-update{margin-top:2px}.progress-card{padding-bottom:10px}.history-card{padding-bottom:12px}.history-head{flex-direction:column;gap:7px}.welcome-features{grid-template-columns:1fr}.state-card{grid-template-columns:1fr;text-align:left}.state-card>a{width:100%;text-align:center}.footer-inner,.footer-inner>div:first-child,.footer-data{align-items:flex-start;flex-direction:column}.footer-data{gap:8px}.floating-whatsapp{right:14px;bottom:14px;width:54px;height:54px}.toast{bottom:80px}}
@media print{body{background:#fff}.site-header,.tracking-hero,.shipment-actions,.support-column,.floating-whatsapp,.site-footer,.tracking-search{display:none!important}.tracking-content{padding:0}.page-has-result .tracking-content{margin:0}.shipment-overview,.progress-card,.history-card{box-shadow:none;break-inside:avoid}.details-grid{grid-template-columns:1fr}.container{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* =========================================================
   AGAEL SEGUIMIENTO PREMIUM V3
   Estados prácticos:
   Verde = etapa activa y completada · Gris = pendiente
   Ámbar = en destino · Rojo = únicamente alerta, anulado o cancelado
   ========================================================= */
:root{
  --state-neutral:#526271;
  --state-neutral-rgb:82,98,113;
  --state-dispatch:#7c3aed;
  --state-dispatch-rgb:124,58,237;
  --state-route:#0b9960;
  --state-route-rgb:11,153,96;
  --state-destination:#d97706;
  --state-destination-rgb:217,119,6;
  --state-success:#0b9960;
  --state-success-rgb:11,153,96;
  --state-danger:#d72638;
  --state-danger-rgb:215,38,56;
  --completed:#0b9960;
  --pending:#d8e1e8;
}
.tracking-state-neutral{--current-state:var(--state-neutral);--current-state-rgb:var(--state-neutral-rgb)}
.tracking-state-dispatch{--current-state:var(--state-dispatch);--current-state-rgb:var(--state-dispatch-rgb)}
.tracking-state-route{--current-state:var(--state-route);--current-state-rgb:var(--state-route-rgb)}
.tracking-state-destination{--current-state:var(--state-destination);--current-state-rgb:var(--state-destination-rgb)}
.tracking-state-success{--current-state:var(--state-success);--current-state-rgb:var(--state-success-rgb)}
.tracking-state-danger{--current-state:var(--state-danger);--current-state-rgb:var(--state-danger-rgb)}

.page-has-result .tracking-content{
  margin-top:-26px;
  padding-top:0;
}
.shipment-dashboard{
  position:relative;
  z-index:3;
  overflow:hidden;
  padding:30px;
  border:1px solid rgba(211,222,231,.96);
  border-radius:30px;
  background:
    radial-gradient(circle at 96% 0%,rgba(var(--current-state-rgb),.10),transparent 25%),
    #fff;
  box-shadow:0 30px 86px rgba(8,18,28,.14);
}
.shipment-dashboard::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--completed),var(--current-state));
}
.shipment-dashboard-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
}
.shipment-dashboard .shipment-code-wrap>span{
  color:#778591;
}
.shipment-dashboard .shipment-code-row h2{
  font-size:clamp(2.1rem,4vw,3.35rem);
}
.shipment-dashboard .icon-button:hover,
.shipment-dashboard .action-button:hover{
  color:var(--current-state);
  border-color:rgba(var(--current-state-rgb),.28);
  background:rgba(var(--current-state-rgb),.06);
}

.current-status-card{
  position:relative;
  margin-top:25px;
  padding:22px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  align-items:stretch;
  gap:15px;
  border:1px solid rgba(var(--current-state-rgb),.20);
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(var(--current-state-rgb),.105),rgba(var(--current-state-rgb),.025) 62%),
    #fff;
}
.current-status-main{
  display:grid;
  grid-template-columns:68px 1fr;
  align-items:center;
  gap:17px;
}
.current-status-icon{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#fff;
  background:var(--current-state);
  box-shadow:0 14px 34px rgba(var(--current-state-rgb),.25);
}
.current-status-icon svg{
  width:35px;
  height:35px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.current-status-main span{
  color:var(--current-state);
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.current-status-main h2{
  margin:3px 0 5px;
  color:#111b26;
  font-size:clamp(1.55rem,3vw,2.25rem);
  line-height:1;
}
.current-status-main p{
  max-width:650px;
  margin:0;
  color:#5f6e7a;
  font-size:.9rem;
}
.next-step-card{
  padding:17px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(213,223,231,.92);
  border-radius:17px;
  background:rgba(255,255,255,.78);
}
.next-step-card small{
  color:#7a8792;
  font-size:.63rem;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.next-step-card b{
  margin-top:5px;
  color:#18232e;
  font-size:1.05rem;
}
.next-step-card span{
  margin-top:4px;
  color:#71808c;
  font-size:.76rem;
  line-height:1.45;
}

.shipment-dashboard .route-display{
  margin:18px 0;
  padding:23px 25px 17px;
  border-color:#dce5eb;
  background:
    linear-gradient(135deg,rgba(246,249,251,.98),rgba(238,244,248,.98));
}
.shipment-dashboard .route-line{
  --route-progress:0%;
}
.shipment-dashboard .route-track{
  height:5px;
  background:#d8e1e8;
  overflow:visible;
}
.shipment-dashboard .route-track i{
  width:var(--route-progress);
  background:var(--completed);
  box-shadow:0 0 0 1px rgba(11,153,96,.06);
}
.shipment-dashboard .route-dot{
  width:16px;
  height:16px;
  background:#cbd5dd;
  box-shadow:0 0 0 2px #cbd5dd;
}
.shipment-dashboard .route-dot.current{
  background:var(--current-state);
  box-shadow:0 0 0 2px var(--current-state),0 0 0 7px rgba(var(--current-state-rgb),.11);
}
.shipment-dashboard .route-dot.completed{
  background:var(--completed);
  box-shadow:0 0 0 2px var(--completed);
}
.route-vehicle{
  position:absolute;
  z-index:4;
  left:clamp(1px,calc(var(--route-progress) - 22px),calc(100% - 44px));
  top:1px;
  width:44px;
  height:38px;
  padding:8px;
  display:grid;
  place-items:center;
  border:3px solid #fff;
  border-radius:12px;
  color:#fff;
  background:var(--current-state);
  box-shadow:
    0 10px 24px rgba(var(--current-state-rgb),.28),
    0 0 0 1px rgba(var(--current-state-rgb),.18);
  transition:left .55s cubic-bezier(.22,.61,.36,1);
}
.route-vehicle svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tracking-state-route .route-vehicle{
  animation:routePulse 2.1s ease-in-out infinite;
}
@keyframes routePulse{
  0%,100%{box-shadow:0 10px 24px rgba(var(--current-state-rgb),.25),0 0 0 0 rgba(var(--current-state-rgb),.18)}
  50%{box-shadow:0 12px 30px rgba(var(--current-state-rgb),.32),0 0 0 9px rgba(var(--current-state-rgb),0)}
}
.route-stage-text{
  grid-column:1/-1;
  margin-top:1px;
  color:#72808c;
  font-size:.69rem;
  font-weight:850;
  letter-spacing:.04em;
  text-align:center;
  text-transform:uppercase;
}

.progress-section{
  margin-top:18px;
  padding:25px 25px 20px;
  border:1px solid #dce5eb;
  border-radius:21px;
  background:#fff;
}
.progress-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.progress-section-head h2{
  margin:7px 0 0;
  font-size:1.55rem;
}
.status-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:13px;
  color:#74818c;
  font-size:.65rem;
  font-weight:850;
}
.status-legend span{
  display:flex;
  align-items:center;
  gap:6px;
}
.status-legend i{
  width:9px;
  height:9px;
  border-radius:50%;
}
.legend-completed i{background:var(--completed)}
.legend-current i{background:var(--current-state)}
.legend-pending i{background:var(--pending)}

.progress-section .progress-steps{
  margin-top:28px;
}
.progress-section .progress-marker{
  width:44px;
  height:44px;
}
.progress-section .progress-marker svg{
  width:21px;
  height:21px;
}
.progress-section .progress-step.completed .progress-marker{
  color:#fff;
  background:var(--completed);
  box-shadow:0 0 0 1px var(--completed);
}
.progress-section .progress-step.current .progress-marker{
  color:#fff;
  background:var(--current-state);
  box-shadow:
    0 0 0 1px var(--current-state),
    0 0 0 8px rgba(var(--current-state-rgb),.12);
}
.progress-section .progress-step.current b{
  color:var(--current-state);
}
.progress-section .progress-step em{
  display:inline-flex;
  margin-top:8px;
  padding:4px 7px;
  border-radius:999px;
  color:#86939e;
  background:#eef3f6;
  font-size:.55rem;
  font-style:normal;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.progress-section .progress-step.completed em{
  color:#087a4c;
  background:#e8f7f0;
}
.progress-section .progress-step.current em{
  color:var(--current-state);
  background:rgba(var(--current-state-rgb),.09);
}
.progress-section .progress-step.pending{
  opacity:.68;
}
@media(min-width:901px){
  .progress-section .progress-step.completed:not(:last-child)::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;
    top:20px;
    width:100%;
    height:3px;
    background:var(--completed);
  }
}

.shipment-dashboard .shipment-metrics{
  margin-top:18px;
  grid-template-columns:repeat(4,1fr);
}
.shipment-dashboard .metric-card{
  min-height:75px;
  border-color:#dfe7ed;
  background:#f9fbfc;
}
.shipment-dashboard .metric-icon{
  color:var(--current-state);
  background:rgba(var(--current-state-rgb),.085);
}
.shipment-dashboard .metric-next{
  border-color:rgba(var(--current-state-rgb),.19);
  background:rgba(var(--current-state-rgb),.045);
}

.cancelled-message{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cancelled-message b{
  color:#a5141c;
}
.cancelled-message span{
  color:#7b353a;
}

.details-grid{
  margin-top:20px;
}
.history-card{
  box-shadow:0 25px 70px rgba(8,18,28,.10);
}
.history-count{
  padding:7px 10px;
  border:1px solid #dce5eb;
  border-radius:999px;
  color:#6e7b87;
  background:#f6f9fb;
  font-size:.63rem;
  font-weight:900;
  text-transform:uppercase;
}
.history-item.completed-event .history-marker span{
  background:var(--completed);
  box-shadow:0 0 0 2px var(--completed);
}
.history-item.latest .history-body{
  margin-bottom:12px;
  padding:15px 16px 17px;
  border:1px solid rgba(var(--history-state-rgb),.16);
  border-radius:14px;
  background:rgba(var(--history-state-rgb),.045);
}
.history-item.history-neutral{--history-state:var(--state-neutral);--history-state-rgb:var(--state-neutral-rgb)}
.history-item.history-dispatch{--history-state:var(--state-dispatch);--history-state-rgb:var(--state-dispatch-rgb)}
.history-item.history-route{--history-state:var(--state-route);--history-state-rgb:var(--state-route-rgb)}
.history-item.history-destination{--history-state:var(--state-destination);--history-state-rgb:var(--state-destination-rgb)}
.history-item.history-success{--history-state:var(--state-success);--history-state-rgb:var(--state-success-rgb)}
.history-item.history-danger{--history-state:var(--state-danger);--history-state-rgb:var(--state-danger-rgb)}
.history-item.latest .history-marker span{
  background:var(--history-state);
  box-shadow:
    0 0 0 2px var(--history-state),
    0 0 0 7px rgba(var(--history-state-rgb),.10);
}
.history-item.latest .history-head h3{
  color:var(--history-state);
}
.history-item.latest .latest-label{
  color:var(--history-state);
  background:rgba(var(--history-state-rgb),.09);
}
.history-item.latest .history-marker::after,
.history-item.completed-event .history-marker::after{
  background:rgba(11,153,96,.35);
}

.status-route{color:var(--state-route);background:#e7f7ef}
.status-dispatch{color:var(--state-dispatch);background:#f1eafe}
.status-destination{color:var(--state-destination);background:#fff3df}
.status-success{color:var(--state-success);background:#e7f7ef}
.status-danger{color:var(--state-danger);background:#fdebed}
.status-neutral{color:var(--state-neutral);background:#edf2f5}
.status-route i{box-shadow:0 0 0 5px rgba(11,153,96,.11)}
.status-dispatch i{box-shadow:0 0 0 5px rgba(124,58,237,.11)}
.status-destination i{box-shadow:0 0 0 5px rgba(217,119,6,.11)}
.status-success i{box-shadow:0 0 0 5px rgba(11,153,96,.11)}
.status-danger i{box-shadow:0 0 0 5px rgba(215,38,56,.11)}
.status-neutral i{box-shadow:0 0 0 5px rgba(82,98,113,.11)}

@media(max-width:900px){
  .shipment-dashboard{
    padding:23px;
  }
  .shipment-dashboard-head,
  .progress-section-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .shipment-dashboard .shipment-actions{
    width:100%;
  }
  .current-status-card{
    grid-template-columns:1fr;
  }
  .shipment-dashboard .shipment-metrics{
    grid-template-columns:1fr 1fr;
  }
  .progress-section .progress-step:not(:last-child)::after{
    background:#dfe7ed;
  }
  .progress-section .progress-step.completed:not(:last-child)::after{
    background:var(--completed);
  }
  .progress-section .progress-step.current:not(:last-child)::after{
    background:linear-gradient(var(--current-state) 0 38%,#dfe7ed 38%);
  }
  .progress-section .progress-step{
    min-height:82px;
  }
}
@media(max-width:650px){
  .shipment-dashboard{
    padding:18px;
    border-radius:22px;
  }
  .shipment-dashboard .shipment-code-row h2{
    font-size:1.8rem;
    overflow-wrap:anywhere;
  }
  .current-status-card{
    margin-top:20px;
    padding:16px;
  }
  .current-status-main{
    grid-template-columns:55px 1fr;
    gap:13px;
  }
  .current-status-icon{
    width:55px;
    height:55px;
    border-radius:16px;
  }
  .current-status-icon svg{
    width:29px;
    height:29px;
  }
  .current-status-main h2{
    font-size:1.55rem;
  }
  .shipment-dashboard .route-display{
    padding:18px;
  }
  .route-stage-text{
    text-align:left;
  }
  .progress-section{
    padding:19px 17px 10px;
  }
  .status-legend{
    gap:9px;
  }
  .shipment-dashboard .shipment-metrics{
    grid-template-columns:1fr;
  }
  .history-count{
    margin-top:4px;
  }
}


/* =========================================================
   AJUSTE V3 — EN RUTA EN VERDE Y MÁS CLARO
   ========================================================= */
.tracking-state-route .current-status-card{
  border-color:rgba(11,153,96,.24);
  background:
    linear-gradient(135deg,rgba(11,153,96,.10),rgba(11,153,96,.025) 62%),
    #fff;
}
.tracking-state-route .current-status-icon{
  background:linear-gradient(135deg,#0b9960,#13b26f);
  box-shadow:0 16px 34px rgba(11,153,96,.28);
}
.tracking-state-route .current-status-main span,
.tracking-state-route .current-status-main h2{
  color:#0b9960;
}
.tracking-state-route .next-step-card{
  border-color:rgba(11,153,96,.16);
  background:linear-gradient(180deg,rgba(11,153,96,.055),rgba(11,153,96,.02));
}
.tracking-state-route .shipment-dashboard::before{
  background:linear-gradient(90deg,#0b9960,#16a34a);
}
.tracking-state-route .shipment-dashboard{
  background:
    radial-gradient(circle at 96% 0%,rgba(11,153,96,.10),transparent 25%),
    #fff;
}
.tracking-state-route .route-track i{
  background:linear-gradient(90deg,#0b9960,#16a34a);
}
.tracking-state-route .route-vehicle{
  background:linear-gradient(135deg,#0b9960,#16a34a);
  box-shadow:
    0 12px 26px rgba(11,153,96,.24),
    0 0 0 1px rgba(11,153,96,.18);
}
.tracking-state-route .route-dot.current{
  background:#10b981;
  box-shadow:0 0 0 2px #10b981,0 0 0 8px rgba(16,185,129,.13);
}
.tracking-state-route .progress-section .progress-step.current .progress-marker{
  background:linear-gradient(135deg,#0b9960,#16a34a);
  box-shadow:
    0 0 0 1px #0b9960,
    0 0 0 8px rgba(11,153,96,.13);
}
.tracking-state-route .progress-section .progress-step.current b,
.tracking-state-route .progress-section .progress-step.current em{
  color:#0b9960;
}
.tracking-state-route .progress-section .progress-step.current em{
  background:rgba(11,153,96,.10);
}
.tracking-state-route .legend-current i{
  background:#10b981;
}
.tracking-state-route .history-item.history-route{
  --history-state:#0b9960;
  --history-state-rgb:11,153,96;
}
.tracking-state-route .latest-label{
  color:#0b9960;
  background:rgba(11,153,96,.10);
}
.tracking-state-route .route-stage-text{
  color:#0b9960;
}
.tracking-state-route .metric-next{
  border-color:rgba(11,153,96,.18);
  background:rgba(11,153,96,.045);
}
.tracking-state-route .metric-next .metric-icon{
  color:#0b9960;
  background:rgba(11,153,96,.09);
}