/* =====================================================================
   track.css — Estilo de la página pública de seguimiento del cliente.
   Toma tokens y patrones del manager para identidad visual unificada.
   Mobile-first, premium SaaS look (Stripe / Toast / Glovo).
   v2.2.5 — 5-pass design polish (impeccable · ui-ux-pro-max · emil-design-eng).
   ===================================================================== */

:root {
  /* Emil Kowalski / motion — strong ease-out for UI feedback and entrances */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* v1.9 — Focus visible WCAG (mismo patrón que manager) */
:focus { outline: none; }
:focus-visible {
  outline: var(--bc-focus-outline, 2px solid #a01818);
  outline-offset: var(--bc-focus-offset, 2px);
  border-radius: inherit;
}

/* Skip-link accesibilidad */
.bc-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 2147483647;
  padding: 0.75rem 1.25rem;
  background: var(--bc-surface, #fff);
  color: var(--bc-brand, #a01818);
  font-weight: 700;
  border-radius: 0 0 8px 0;
  transition: top 0.18s ease;
  text-decoration: none;
}
.bc-skip-link:focus,
.bc-skip-link:focus-visible { top: 0; outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* v1.9 — Touch-action: manipulation en controles táctiles */
button, [type="button"], [type="submit"], [role="button"], a, label, .track-footer a, .cookie-consent-btn, .cookie-consent-btn-secondary {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  .track-card,
  .track-stage-callout,
  .track-eta-panel,
  .track-map,
  .cookie-consent { animation: none !important; }
  .track-card,
  .track-stage-callout,
  .track-eta-panel,
  .track-map,
  .cookie-consent { opacity: 1 !important; transform: none !important; }
}

.track-body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% 10%, rgba(var(--bc-brand-rgb), 0.10) 0%, transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(var(--bc-accent-rgb), 0.08) 0%, transparent 55%),
    var(--bc-bg-muted);
  font-family: var(--bc-font-body);
  font-feature-settings: 'kern', 'liga', 'calt';
  color: var(--bc-text);
}

/* v1.9 — Fluid typography: el título escala suave entre 320px y 720px
   (320-720 es el rango móvil que cubre 99% de clientes en track público).
   clamp(min, scale, max) → no salta, fluye. */
.track-order-num {
  font-size: clamp(1.4rem, 3.5vw + 0.5rem, 1.85rem) !important;
}
.track-brand-title {
  font-size: clamp(1.2rem, 3vw + 0.4rem, 1.5rem) !important;
}

.track-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  overflow-x: clip;
}

/* Header */
.track-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0 2rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
}
.track-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.track-brand-logo {
  width: 52px; height: 52px;
  filter: drop-shadow(0 4px 12px rgba(var(--bc-brand-rgb), 0.22));
}
.track-brand-logo svg, .track-brand-logo img { width: 100%; height: 100%; }
.track-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.track-brand-title {
  font-family: var(--bc-font-display);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.track-brand-title em {
  font-family: var(--bc-font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--bc-brand);
  letter-spacing: 0;
  text-transform: none;
}
.track-brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bc-text-muted);
  margin-top: 0.25rem;
}

/* Loading — skeleton premium v2.0 */
.track-loading {
  text-align: center;
  padding: 3rem 1rem;
}
.track-loading .spinner-border {
  width: 2.5rem; height: 2.5rem;
  border-width: 3px;
}
.track-loading p {
  color: var(--bc-text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* Pass 1: skeleton as a surfaced card for hierarchy and contrast */
.track-skeleton {
  padding: 1.5rem 1.25rem;
  background: var(--bc-surface, #fff);
  border: 1px solid var(--bc-line, #e7e3df);
  border-radius: var(--bc-radius-xl, 22px);
  box-shadow: var(--bc-shadow-lg, 0 12px 32px rgba(28,25,23,0.12));
  position: relative;
  overflow: hidden;
}

.track-skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.track-skeleton-bar,
.track-skeleton-step {
  position: relative;
  overflow: hidden;
  background: var(--bc-surface-3, #ebe8e5);
  isolation: isolate;
}
.track-skeleton-bar::after,
.track-skeleton-step::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--bc-brand-rgb, 160, 24, 24), 0.16) 35%,
    rgba(var(--bc-brand-rgb, 160, 24, 24), 0.24) 50%,
    rgba(var(--bc-brand-rgb, 160, 24, 24), 0.16) 65%,
    transparent 100%);
  background-size: 200% 100%;
  animation: bc-skeleton-shimmer 1.5s linear infinite;
  z-index: 1;
}
.track-skeleton-bar {
  border-radius: 8px;
  height: 16px;
}
.track-skeleton-bar.lg { height: 24px; }
.track-skeleton-bar.sm { height: 12px; }
.track-skeleton-bar.w-30 { width: 30%; }
.track-skeleton-bar.w-50 { width: 50%; }
.track-skeleton-bar.w-70 { width: 70%; }
.track-skeleton-bar.w-100 { width: 100%; }
.track-skeleton-bar + .track-skeleton-bar { margin-top: 8px; }
.track-skeleton-stepper {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0 1.5rem;
}
.track-skeleton-step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.track-skeleton-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 1.5rem;
}
.track-skeleton-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
[data-bs-theme="dark"] .track-skeleton-bar::after,
[data-bs-theme="dark"] .track-skeleton-step::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--bc-brand-rgb, 248, 113, 113), 0.28) 35%,
    rgba(var(--bc-brand-rgb, 248, 113, 113), 0.38) 50%,
    rgba(var(--bc-brand-rgb, 248, 113, 113), 0.28) 65%,
    transparent 100%);
}
@keyframes bc-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Main card */
.track-main { min-height: 320px; }

/* Order card */
.track-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-xl);
  box-shadow: var(--bc-shadow-lg);
  padding: 1.5rem 1.25rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}


/* Header de la card */
.track-order-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.track-order-num {
  font-family: var(--bc-font-serif);
  font-weight: 800;
  font-size: 1.65rem;
  color: var(--bc-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.track-order-num small {
  font-size: 0.6em;
  color: var(--bc-text-muted);
  margin-right: 0.15em;
  font-weight: 700;
}
.track-order-time {
  font-size: 0.85rem;
  color: var(--bc-text-muted);
}
.track-order-time strong { color: var(--bc-text); font-weight: 600; }

/* Stepper de estados */
.track-stepper {
  position: relative;
  margin: 1.5rem 0;
}
.track-stepper-bar {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  height: 4px;
  background: var(--bc-surface-3);
  border-radius: 2px;
  z-index: 0;
}
.track-stepper-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--bc-success) 0%, var(--bc-brand) 100%);
  border-radius: 2px;
  transform: scaleX(var(--bar-f, 0));
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.track-stepper-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  flex: 1;
  min-width: 0;
}
.track-step-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bc-surface-3);
  color: var(--bc-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border: 2px solid var(--bc-surface);
  transition: background-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.track-step.is-active .track-step-icon {
  background: var(--bc-brand);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(var(--bc-brand-rgb), 0.35);
}
.track-step.is-done .track-step-icon {
  background: var(--bc-success);
  color: #fff;
}
.track-step.is-failed .track-step-icon {
  background: var(--bc-danger);
  color: #fff;
}
.track-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.track-step.is-active .track-step-label,
.track-step.is-done .track-step-label { color: var(--bc-text); }
.track-step-time {
  font-size: 0.65rem;
  color: var(--bc-text-subtle);
  margin-top: 0.1rem;
  font-variant-numeric: tabular-nums;
}

/* En móvil las etiquetas de 5 pasos (~78px c/u) se solapan; reducir tracking */
@media (max-width: 480px) {
  .track-step { gap: 0.3rem; }
  .track-step-label {
    font-size: 0.6rem;
    letter-spacing: 0.01em;
  }
  .track-step-time { font-size: 0.58rem; }
}

/* v2.2.5 — Aviso "repartidor cerca" */
.track-nearby-banner {
  background: linear-gradient(135deg, var(--bc-success-soft) 0%, color-mix(in srgb, var(--bc-success-soft) 55%, var(--bc-surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--bc-success) 25%, var(--bc-line));
  border-radius: var(--bc-radius-lg);
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bc-success);
  font-weight: 600;
  font-size: 0.95rem;
  animation: track-fade-up 0.4s ease;
}
.track-nearby-banner i { font-size: 1.3rem; }

/* ETA destacado */
.track-eta-card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--bc-brand) 8%, var(--bc-surface)) 0%,
    color-mix(in srgb, var(--bc-accent) 6%, var(--bc-surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--bc-brand) 20%, var(--bc-line));
  border-radius: var(--bc-radius-lg);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.track-eta-icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  background: var(--bc-brand);
  color: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(var(--bc-brand-rgb), 0.3);
}
.track-eta-text { flex: 1 1 auto; }
.track-eta-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bc-text-muted);
  margin-bottom: 0.15rem;
}
.track-eta-value {
  font-family: var(--bc-font-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--bc-text);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.track-eta-sub {
  font-size: 0.78rem;
  color: var(--bc-text-muted);
  margin-top: 0.2rem;
}

/* Mapa */
.track-map-wrap {
  position: relative;
  border-radius: var(--bc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bc-line);
  margin: 1.25rem 0;
  box-shadow: var(--bc-shadow-sm);
}
.track-map {
  width: 100%;
  height: 280px;
  background: var(--bc-surface-2);
}
.track-map-legend {
  position: absolute;
  bottom: 8px; left: 8px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-sm);
  padding: 0.45rem 0.65rem;
  font-size: 0.72rem;
  color: var(--bc-text);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 401;
  box-shadow: var(--bc-shadow-sm);
}
.track-map-legend-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.track-map-swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Repartidor info */
.track-driver-card {
  background: var(--bc-surface-2);
  border-radius: var(--bc-radius-md);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1rem 0;
}
.track-driver-avatar {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--bc-brand) 0%, var(--bc-brand-dark) 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.track-driver-text { flex: 1 1 auto; min-width: 0; }
.track-driver-name { font-weight: 700; color: var(--bc-text); }
.track-driver-meta { font-size: 0.8rem; color: var(--bc-text-muted); }

/* Items / Resumen del pedido */
.track-items {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  border-top: 1px dashed var(--bc-line);
  padding-top: 0.85rem;
}
.track-items li {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.88rem;
}
.track-items li > span:first-child {
  color: var(--bc-text);
}
.track-items .track-item-qty {
  font-weight: 700;
  color: var(--bc-brand);
  margin-right: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.track-items-total {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bc-line);
  font-weight: 700;
  color: var(--bc-text);
}
.track-items-total strong {
  font-family: var(--bc-font-serif);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

/* Footer */
.track-footer {
  text-align: center;
  margin-top: 2.5rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  color: var(--bc-text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}
.track-footer a,
.track-legal-link a {
  color: var(--bc-brand);
  text-decoration: none;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--bc-brand-rgb, 160, 24, 24), 0.25);
  border-radius: 0.15rem;
  transition:
    color 160ms var(--ease-out),
    text-decoration-color 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    transform 140ms var(--ease-out);
}
.track-footer a:hover,
.track-legal-link a:hover {
  color: var(--bc-brand-dark);
  text-decoration: underline;
  text-decoration-color: rgba(var(--bc-brand-rgb, 160, 24, 24), 0.65);
}
.track-footer a:active,
.track-legal-link a:active {
  transform: scale(0.97);
}
.track-footer a:focus-visible,
.track-legal-link a:focus-visible {
  outline: none;
  box-shadow: var(--bc-focus-ring);
  text-decoration: none;
}
.track-footer-help {
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.track-legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  list-style: none;
}
.track-legal-links li:not(:last-child)::after {
  content: '·';
  color: var(--bc-text-subtle);
  margin-inline-start: 0.35rem;
}
.track-legal-link {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.track-copyright {
  font-size: 0.75rem;
  color: var(--bc-text-subtle);
  margin: 0;
}

/* Modales legales */
.track-legal-body {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--bc-text);
}
.track-legal-body section + section {
  margin-top: 1.25rem;
}
.track-legal-body h6 {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bc-text);
  margin-bottom: 0.5rem;
}
.track-legal-body p { margin-bottom: 0.5rem; }
.track-legal-body ul { padding-left: 1.1rem; margin-bottom: 0.5rem; }
.track-legal-body li { margin-bottom: 0.4rem; }
.track-legal-body a { color: var(--bc-brand); text-decoration: underline; }
.track-legal-body a:hover { color: var(--bc-brand-dark); }
.track-legal-body code {
  font-family: var(--bc-font-mono, monospace);
  font-size: 0.78rem;
  background: var(--bc-surface-2);
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
}

/* Error state */
.track-error {
  background: var(--bc-danger-soft);
  border: 1px solid color-mix(in srgb, var(--bc-danger) 20%, var(--bc-line));
  border-radius: var(--bc-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--bc-danger);
  position: relative;
  overflow: hidden;
}
.track-error i {
  font-size: 2.75rem;
  margin-bottom: 0.85rem;
  display: inline-flex;
  width: 64px; height: 64px;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bc-danger) 12%, transparent);
  border-radius: 50%;
}
.track-error h2,
.track-error h3 {
  font-family: var(--bc-font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--bc-danger);
}
.track-error p {
  color: color-mix(in srgb, var(--bc-danger) 80%, var(--bc-text));
  line-height: 1.55;
  max-width: 45ch;
  margin: 0 auto;
}

/* v2.2.5 — Línea de ruta animada sobre el mapa */
.track-route-line,
.track-route-line path {
  animation: track-route-dash 1.2s linear infinite;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes track-route-dash {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .track-route-line,
  .track-route-line path { animation: none; }
}

/* Animaciones */
.track-card {
  animation: track-fade-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes track-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* v2.2.5 — Marcador del repartidor en tracking público */
.track-marker-driver {
  width: 40px !important;
  height: 40px !important;
  background: var(--bc-brand);
  color: #fff;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(var(--bc-brand-rgb), 0.4);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  position: relative;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.track-marker-driver i { position: relative; z-index: 1; }
.track-marker-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--bc-brand);
  opacity: 0.7;
  animation: track-marker-pulse 1.6s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes track-marker-pulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.track-step.is-active .track-step-icon {
  animation: track-pulse 2s ease-in-out infinite;
}
@keyframes track-pulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(var(--bc-brand-rgb), 0.35); }
  50%      { box-shadow: 0 6px 22px rgba(var(--bc-brand-rgb), 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .track-marker-driver { transition: opacity 0.18s ease, box-shadow 0.18s ease; }
  .track-marker-pulse { animation: none; opacity: 0; }
  .track-step.is-active .track-step-icon { animation: none; }
  .track-stage-callout-warm .track-stage-emoji { animation: none; }
  .track-route-line,
  .track-route-line path { animation: none; }
}

/* Mobile breakpoint */
@media (max-width: 575.98px) {
  .track-wrap { padding: 0.75rem 0.75rem 1.5rem; }
  .track-card { padding: 1.25rem 1rem; border-radius: var(--bc-radius-lg); }
  .track-order-num { font-size: 1.4rem; }
  .track-step-label { font-size: 0.7rem; }
  .track-eta-value { font-size: 1.2rem; }
  .track-map { height: 220px; }
  .track-brand-logo { width: 44px; height: 44px; }
  .track-brand-title { font-size: 1.15rem; }
  .track-brand-sub { font-size: 0.7rem; }
}

/* ============================================================
   STAGE CALLOUT — v1.5.2 — Bloque emocional según estado
   ============================================================ */
.track-stage-callout {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border-radius: var(--bc-radius-lg);
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  animation: track-callout-in 0.5s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}
@keyframes track-callout-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.track-stage-callout-info {
  background: linear-gradient(135deg, var(--bc-info-soft) 0%, color-mix(in srgb, var(--bc-info-soft) 55%, var(--bc-surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--bc-info) 25%, var(--bc-line));
  color: var(--bc-info);
}

.track-stage-callout-warm {
  background: linear-gradient(135deg, var(--bc-warning-soft) 0%, color-mix(in srgb, var(--bc-warning-soft) 55%, var(--bc-surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--bc-warning) 25%, var(--bc-line));
  color: var(--bc-warning);
}
.track-stage-callout-warm .track-stage-emoji {
  animation: track-warm-flicker 1.6s ease-in-out infinite;
}
@keyframes track-warm-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}

.track-stage-callout-success {
  background: linear-gradient(135deg, var(--bc-success-soft) 0%, color-mix(in srgb, var(--bc-success-soft) 55%, var(--bc-surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--bc-success) 25%, var(--bc-line));
  color: var(--bc-success);
}

.track-stage-emoji {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.track-stage-text { flex: 1; min-width: 0; line-height: 1.35; }
.track-stage-title {
  font-family: var(--bc-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: inherit;
  margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
}
.track-stage-sub {
  font-size: 0.84rem;
  color: var(--bc-text-muted, #6a6460);
}
.track-stage-callout .track-stage-sub { color: color-mix(in srgb, var(--bc-text) 78%, var(--bc-text-muted)); }

@media (max-width: 480px) {
  .track-stage-callout { padding: 0.85rem; gap: 0.75rem; }
  .track-stage-emoji { font-size: 2rem; }
  .track-stage-title { font-size: 1rem; }
  .track-stage-sub { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .track-card,
  .track-stage-callout,
  .track-eta-panel,
  .track-map { animation: none !important; }
}

/* Pasada 12 — Lote 8: offline + marcadores + leyenda mapa */
.track-brand-logo--emoji { font-size: 2.4rem; text-align: center; }
.track-main--offline { text-align: center; padding: 2rem 1rem; }
.track-card--offline { max-width: 420px; margin-inline: auto; padding: 2rem; }
.track-offline-icon { font-size: 3rem; margin-bottom: 0.75rem; line-height: 1; }
.track-offline-title { margin-bottom: 0.5rem; }

.track-map-swatch--driver { background: var(--bc-brand); }
.track-map-swatch--target { background: var(--bc-success); }
.track-map-swatch--biz    { background: var(--bc-text); }

.track-marker-target-inner,
.track-marker-biz-inner {
  width: 38px; height: 38px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.track-marker-target-inner {
  background: var(--bc-success);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.track-marker-target-inner i { transform: rotate(45deg); }
.track-marker-biz-inner {
  background: var(--bc-text);
  border-radius: 12px;
  border: 2px solid var(--bc-brand);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* v2.2.4 — Marcador para datos legales sin configurar */
.bc-legal-missing {
  color: var(--bc-danger, #dc2626);
  font-style: italic;
  font-weight: 500;
  cursor: help;
  border-bottom: 1px dashed var(--bc-danger, #dc2626);
}

/* ============================================================
   v2.3 — Experiencia cliente: avisos, valoración, mensajes
   rápidos, propina, PIN de entrega e incidencias del local.
   ============================================================ */

/* Título de las mini-secciones dentro de la card */
.track-sec-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--bc-text);
  margin-bottom: 0.7rem;
}
.track-sec-title i {
  color: var(--bc-brand);
  font-size: 1.15rem;
}

/* Cards compactas compartidas */
.track-rate-card,
.track-msg-card,
.track-tip-card {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-lg);
  background: var(--bc-surface-2);
}

/* — Botón "Avisarme" dentro de la ETA card — */
.track-eta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}
.track-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--bc-line-strong);
  background: var(--bc-surface);
  color: var(--bc-text-muted);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    color 0.16s var(--ease-out),
    border-color 0.16s var(--ease-out),
    background 0.16s var(--ease-out),
    transform 0.12s var(--ease-out);
}
.track-notify-btn:hover:not(:disabled) {
  color: var(--bc-brand);
  border-color: var(--bc-brand);
  transform: translateY(-1px);
}
.track-notify-btn.is-on,
.track-notify-btn.is-on:disabled {
  color: var(--bc-success);
  background: var(--bc-success-soft);
  border-color: color-mix(in srgb, var(--bc-success) 35%, var(--bc-line));
  opacity: 1;
}
.track-notify-hint {
  font-size: 0.68rem;
  color: var(--bc-text-muted);
  max-width: 150px;
  text-align: right;
  line-height: 1.3;
}

/* — Valoración por estrellas — */
.track-stars {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.track-star {
  background: none;
  border: none;
  padding: 0.15rem;
  line-height: 1;
  font-size: 2rem;
  color: var(--bc-surface-3);
  border-radius: var(--bc-radius-sm);
  transition: transform 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.track-star:hover,
.track-star:focus-visible { transform: scale(1.15); }
.track-star.is-on { color: var(--bc-gold); }
.track-star-ico {
  font-size: 1.7rem;
  color: var(--bc-surface-3);
  line-height: 1;
}
.track-star-ico.is-on { color: var(--bc-gold); }
.track-rate-card.is-rated .track-stars { margin-bottom: 0.25rem; }
.track-rate-comment {
  font-size: 0.85rem;
  resize: vertical;
  min-height: 56px;
}
.track-rate-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.65rem;
  flex-wrap: wrap;
}
.track-rate-given {
  font-style: italic;
  color: var(--bc-text-muted);
  font-size: 0.86rem;
  margin: 0.25rem 0 0;
}

/* — Chips (mensajes rápidos + propina) — */
.track-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.track-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--bc-line-strong);
  background: var(--bc-surface);
  color: var(--bc-text);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  transition:
    color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    background 0.15s var(--ease-out),
    transform 0.12s var(--ease-out);
}
.track-chip:hover:not(:disabled) {
  border-color: var(--bc-brand);
  color: var(--bc-brand);
  transform: translateY(-1px);
}
.track-chip.is-active {
  background: var(--bc-brand);
  border-color: var(--bc-brand);
  color: #fff;
}
.track-chip.is-sent,
.track-chip.is-sent:disabled {
  background: var(--bc-success-soft);
  border-color: color-mix(in srgb, var(--bc-success) 35%, var(--bc-line));
  color: var(--bc-success);
  opacity: 1;
}
.track-chip:disabled { cursor: default; }

/* — Propina — */
.track-tip-custom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.track-tip-custom .form-control { max-width: 160px; }
.track-tip-card.is-sent {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bc-success);
  font-weight: 600;
  font-size: 0.92rem;
}
.track-tip-card.is-sent i { font-size: 1.35rem; }

/* — Feedback inline (aria-live) — */
.track-inline-fb {
  font-size: 0.8rem;
  color: var(--bc-text-muted);
}
.track-inline-fb.is-err { color: var(--bc-danger); }
.track-msg-card .track-inline-fb,
.track-tip-card .track-inline-fb { margin-top: 0.55rem; }
.track-msg-card .track-inline-fb:empty,
.track-tip-card .track-inline-fb:empty { margin-top: 0; }

/* — PIN de entrega — */
.track-pin-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--bc-brand) 40%, var(--bc-line));
  border-radius: var(--bc-radius-lg);
  background: color-mix(in srgb, var(--bc-brand) 5%, var(--bc-surface));
}
.track-pin-card > i {
  font-size: 1.5rem;
  color: var(--bc-brand);
  flex-shrink: 0;
}
.track-pin-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.track-pin-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bc-text-muted);
}
.track-pin-code {
  font-family: var(--bc-font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--bc-text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.track-pin-hint {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
}

/* — Incidencias / aviso del local — */
.track-incident {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.75rem 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--bc-radius-md);
  background: var(--bc-warning-soft);
  border: 1px solid color-mix(in srgb, var(--bc-warning) 25%, var(--bc-line));
  font-size: 0.85rem;
  color: var(--bc-text);
  line-height: 1.4;
}
.track-incident > i {
  color: var(--bc-warning);
  font-size: 1.15rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.track-incident-text { min-width: 0; }
.track-incident-time {
  display: block;
  font-size: 0.7rem;
  color: var(--bc-text-muted);
  margin-top: 0.15rem;
}

/* — Hora programada (bajo "Hora prometida") — */
.track-sched {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
}
.track-sched i { font-size: 0.85rem; }

@media (max-width: 480px) {
  .track-eta-card { flex-wrap: wrap; }
  .track-eta-actions {
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .track-notify-hint { max-width: none; text-align: left; }
  .track-pin-code { font-size: 1.45rem; }
  .track-star { font-size: 1.75rem; }
}

/* prefers-reduced-motion: safety catch-all for track */
@media (prefers-reduced-motion: reduce) {
  .track-skeleton-bar,
  .track-skeleton-step,
  .track-nearby-banner,
  .track-stage-callout-warm,
  .track-stage-callout-warm .track-stage-emoji,
  .track-marker-pulse,
  .track-step.is-active .track-step-icon,
  .track-route-line,
  .track-route-line path,
  .track-card,
  .track-stage-callout,
  .track-eta-panel,
  .track-map { animation: none !important; }
  .track-nearby-banner,
  .track-stage-callout,
  .track-stage-callout-warm,
  .track-card,
  .track-eta-panel,
  .track-map,
  .track-step.is-active .track-step-icon,
  .track-stage-callout-warm .track-stage-emoji { opacity: 1 !important; transform: none !important; }
  .track-marker-pulse { opacity: 0; }
}

/* --- Touch targets ≥44px (Apple HIG / WCAG 2.5.5) — solo punteros táctiles --- */
@media (pointer: coarse) {
  .track-legal-link,
  .track-footer-help a { display: inline-flex; align-items: center; min-height: 44px; }
}