/* =============================================================================
   JADE TRACK — Hoja de estilo del módulo
   =============================================================================
   Destino:        static/css/jade-track.css
   Enlazado en:    templates/base.html
   
   TRES REGLAS QUE ORDENAN TODO ESTE ARCHIVO
   -----------------------------------------------------------------------------
   1. TODO cuelga de #tracker-admin. Ninguna regla es global. El módulo ya tuvo
      un incidente de fuga de CSS (commit ecd377ff, "fugas css en perla") y el
      scoping es lo que impide que se repita.

   2. El tema oscuro se activa con body.dark-mode — NO con prefers-color-scheme.
      Así funciona el proyecto: toggleTheme() en static/js/main.js:254 alterna la
      clase y la persiste en localStorage.theme. Un @media prefers-color-scheme
      aquí no se dispararía nunca.

   3. En el bloque oscuro sólo se redefinen tokens, jamás componentes. Si un
      componente necesita una regla que sólo existe en oscuro, es que le falta un
      token.

   NOTA SOBRE LOS TOKENS GLOBALES
   -----------------------------------------------------------------------------
   Los tokens del módulo se derivan de los globales de static/css/main.css con
   fallback literal, para que un cambio de marca se propague solo. Con dos
   excepciones deliberadas:

   · --bg-secondary  no se redefine en body.dark-mode (static/css/dark-mode.css
                     se lo salta), así que en oscuro devolvería el gris claro.
                     Aquí se define --jt-surface-2 en local.
   · --primary-light en oscuro vale #064e3b, un verde muy oscuro pensado como
                     fondo de item activo. Sirve para --jt-accent-soft pero no
                     como borde: para eso está --jt-accent-line.
   ============================================================================= */


/* =============================================================================
   1 · TOKENS — MODO CLARO (base)
   ============================================================================= */

#tracker-admin,
.jt-modal,
#tracker-evidence-modal,
#tracker-assign-modal,
#tracker-scanitems-modal,
#perla-column-mapping-modal,
#tracker-docs-modal {
  /* — Superficies ————————————————————————————————— */
  --jt-ground:      var(--bg-color, #fafaf9);      /* lienzo del módulo        */
  --jt-surface:     var(--card-bg, #ffffff);       /* tarjetas, tablas, campos */
  --jt-surface-2:   #f4f3f1;                       /* rieles, thead, hover     */
  --jt-surface-3:   #eceae7;                       /* miniatura vacía, skeleton*/
  /* Superficie ELEVADA sobre --jt-surface: el segmento activo y los botones.
     En claro coincide con la superficie -la elevacion la da el borde-, pero en
     oscuro tiene que ser mas clara, no mas oscura, o la jerarquia se invierte. */
  --jt-raised:      #ffffff;

  /* — Líneas ——————————————————————————————————————— */
  --jt-line:        var(--border-color, #e7e5e4);
  --jt-line-strong: #d4d0ca;

  /* — Tinta ———————————————————————————————————————— */
  --jt-ink:         var(--text-color, #292524);    /* cifras, títulos          */
  --jt-ink-2:       var(--text-muted, #57534e);    /* cuerpo                   */
  --jt-ink-3:       #8a847d;                       /* etiquetas, placeholders  */
  --jt-ink-on-accent: #ffffff;

  /* — Acento ——————————————————————————————————————— */
  --jt-accent:      var(--primary-color, #059669);
  --jt-accent-2:    var(--primary-hover, #047857);
  --jt-accent-soft: var(--primary-light, #ecfdf5);
  --jt-accent-line: #a7f3d0;

  /* — Semántica de estado ——————————————————————————
     Independiente del acento. Nunca se usa para decorar.                     */
  --jt-ok:          #16a34a;   --jt-ok-soft:    #dcfce7;   --jt-ok-line:    #bbf7d0;
  --jt-warn:        #d97706;   --jt-warn-soft:  #fef3c7;   --jt-warn-line:  #fde68a;
  --jt-crit:        #dc2626;   --jt-crit-soft:  #fee2e2;   --jt-crit-line:  #fecaca;
  --jt-info:        #4f46e5;   --jt-info-soft:  #e0e7ff;   --jt-info-line:  #c7d2fe;
  --jt-live:        #0891b2;   --jt-live-soft:  #cffafe;   --jt-live-line:  #a5f3fc;
  --jt-neutral:     #78716c;

  /* — Sombra ——————————————————————————————————————— */
  --jt-shadow:      0 1px 2px rgba(41, 37, 36, .06), 0 4px 16px rgba(41, 37, 36, .05);
  --jt-shadow-lift: 0 2px 4px rgba(41, 37, 36, .08), 0 12px 32px rgba(41, 37, 36, .10);
  --jt-shadow-pop:  0 16px 48px rgba(41, 37, 36, .16);
  --jt-ring:        0 0 0 3px color-mix(in srgb, var(--jt-accent) 26%, transparent);

  /* — Escala de espacio y radio ——————————————————— */
  --jt-s1: 4px;  --jt-s2: 8px;  --jt-s3: 12px;
  --jt-s4: 16px; --jt-s5: 24px; --jt-s6: 32px;
  --jt-r-sm: var(--radius-sm, .5rem);
  --jt-r-md: var(--radius-md, .75rem);
  --jt-r-lg: var(--radius-lg, 1rem);
  --jt-r-pill: 999px;

  /* — Escala tipográfica ——————————————————————————
     Cinco tamaños. Cualquier valor fuera de esta lista es un error.          */
  --jt-t-display: 1.5rem;    /* título del módulo                            */
  --jt-t-metric:  1.75rem;   /* cifra de KPI                                 */
  --jt-t-title:   1.05rem;   /* título de sección                            */
  --jt-t-body:    .9rem;     /* cuerpo, celdas, controles                    */
  --jt-t-label:   .78rem;    /* etiquetas, metadatos                         */
  --jt-t-micro:   .68rem;    /* chips, eyebrows                              */

  /* — Constantes de forma ——————————————————————————
     El punto de estado a 9px: a 6px se perdía junto al texto.                */
  --jt-dot:       9px;
  --jt-dot-sm:    7px;
  --jt-icon:      18px;
  --jt-icon-sm:   15px;
  --jt-hairline:  1px;

  /* — Aplicación al panel ——————————————————————————— */
  background: var(--jt-ground);
  color: var(--jt-ink);
  font-size: var(--jt-t-body);
  line-height: 1.55;
}


/* =============================================================================
   2 · TOKENS — MODO OSCURO
   Sólo tokens. Ni un solo selector de componente aquí abajo.
   ============================================================================= */

body.dark-mode #tracker-admin,
body.dark-mode .jt-modal,
body.dark-mode #tracker-evidence-modal,
body.dark-mode #tracker-assign-modal,
body.dark-mode #tracker-scanitems-modal,
body.dark-mode #perla-column-mapping-modal,
body.dark-mode #tracker-docs-modal {
  --jt-ground:      var(--bg-color, #1c1917);
  --jt-surface:     var(--card-bg, #292524);
  --jt-surface-2:   #322e2a;
  --jt-surface-3:   #3d3835;
  --jt-raised:      #3d3835;

  --jt-line:        var(--border-color, #44403c);
  --jt-line-strong: #57514b;

  --jt-ink:         var(--text-color, #e7e5e4);
  --jt-ink-2:       var(--text-muted, #a8a29e);
  --jt-ink-3:       #857f78;
  --jt-ink-on-accent: #04241a;   /* sobre #10b981 el blanco no alcanza AA    */

  --jt-accent:      var(--primary-color, #10b981);
  --jt-accent-2:    var(--primary-hover, #34d399);
  --jt-accent-soft: #06392a;     /* propio: --primary-light es fondo de nav  */
  --jt-accent-line: #157f57;

  /* Estados subidos en luminosidad: los tonos claros no pasan AA sobre
     stone-800. Los *-soft pasan de pastel a profundo, no a un gris.          */
  --jt-ok:          #4ade80;   --jt-ok-soft:    #0a2e1a;   --jt-ok-line:    #166534;
  --jt-warn:        #fbbf24;   --jt-warn-soft:  #382407;   --jt-warn-line:  #92400e;
  --jt-crit:        #f87171;   --jt-crit-soft:  #3d1414;   --jt-crit-line:  #991b1b;
  --jt-info:        #a5b4fc;   --jt-info-soft:  #1e1b4b;   --jt-info-line:  #3730a3;
  --jt-live:        #22d3ee;   --jt-live-soft:  #082f36;   --jt-live-line:  #0e7490;
  --jt-neutral:     #a8a29e;

  --jt-shadow:      0 1px 2px rgba(0, 0, 0, .40), 0 4px 16px rgba(0, 0, 0, .30);
  --jt-shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .40);
  --jt-shadow-pop:  0 16px 48px rgba(0, 0, 0, .55);
}


/* =============================================================================
   3 · ESQUELETO Y CABECERA
   El módulo deja de ser una sola tarjeta blanca gigante: la cabecera se eleva
   sobre el lienzo y cada bloque de contenido es su propia superficie.
   ============================================================================= */

#tracker-admin .jt-shell {
  display: flex;
  flex-direction: column;
  gap: var(--jt-s4);
}

#tracker-admin .jt-body {
  display: flex;
  flex-direction: column;
}

/* Paridad con FedEx: mismo degradado, mismo subtítulo dinámico. */

#tracker-admin .jt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jt-s4);
  flex-wrap: wrap;
  padding: var(--jt-s4) var(--jt-s5);
  border-radius: var(--jt-r-md);
  background: linear-gradient(135deg, var(--jt-accent), var(--jt-accent-2));
  color: var(--jt-ink-on-accent);
  margin-bottom: var(--jt-s4);
}

#tracker-admin .jt-header__title {
  display: flex;
  align-items: baseline;
  gap: var(--jt-s3);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--jt-t-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: inherit;
}

/* Subtítulo dinámico: "Última Milla — Monitor". Lo escribe
   trackerAdmin.updateHeaderSubtitle() (tracker-admin-tab.html). */
#tracker-admin .jt-header__sub {
  font-size: var(--jt-t-label);
  font-weight: 400;
  opacity: .82;
}

#tracker-admin .jt-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--jt-s2);
  padding: var(--jt-s2);
  border: 0;
  border-radius: var(--jt-r-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
#tracker-admin .jt-bell:hover { background: rgba(255, 255, 255, .14); }
#tracker-admin .jt-bell svg { width: var(--jt-icon); height: var(--jt-icon); }

#tracker-admin .jt-bell__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  padding: 0 5px;
  border: 2px solid var(--jt-accent);
  border-radius: var(--jt-r-pill);
  background: var(--jt-crit);
  color: #ffffff;
  font-size: var(--jt-t-micro);
  font-weight: 700;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#tracker-admin .jt-bell__count[hidden] { display: none; }

/* Panel desplegable de notificaciones. Vive sobre la cabecera, asi que sus
   colores salen del set de la superficie, no del de la cabecera. */
#tracker-admin .jt-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 999;
  width: min(380px, 88vw);
  max-height: 460px;
  overflow-y: auto;
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-md);
  background: var(--jt-surface);
  color: var(--jt-ink);
  box-shadow: var(--jt-shadow-pop);
  text-align: left;
}

#tracker-admin .jt-notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jt-s3);
  padding: var(--jt-s3) var(--jt-s4);
  border-bottom: var(--jt-hairline) solid var(--jt-line);
  font-weight: 600;
}
#tracker-admin .jt-notif-panel__head button {
  border: 0;
  background: none;
  color: var(--jt-accent);
  font: inherit;
  font-size: var(--jt-t-label);
  font-weight: 600;
  cursor: pointer;
}


/* =============================================================================
   4 · CONMUTADOR DE MODALIDAD  ·  Última Milla / Distribución CEDIS
   IDs que espera el JS: #btn-admin-mode-delivery, #btn-admin-mode-cedis
   ============================================================================= */

#tracker-admin .jt-modality { display: flex; justify-content: center; margin-bottom: var(--jt-s4); }

#tracker-admin .jt-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: calc(var(--jt-r-sm) + 4px);
  background: var(--jt-surface-2);
}

#tracker-admin .jt-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--jt-s2);
  padding: 7px 18px;
  border: 0;
  border-radius: var(--jt-r-sm);
  background: transparent;
  color: var(--jt-ink-3);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
#tracker-admin .jt-seg__btn svg { width: var(--jt-icon-sm); height: var(--jt-icon-sm); }
#tracker-admin .jt-seg__btn:hover { color: var(--jt-ink-2); }

#tracker-admin .jt-seg__btn[aria-selected="true"] {
  background: var(--jt-raised);
  color: var(--jt-ink);
  box-shadow: var(--jt-shadow);
}


/* =============================================================================
   5 · SUBNAVEGACIÓN
   IDs que espera el JS: #subtab-btn-monitor | -routing | -generation |
   -catalogs | -config
   ============================================================================= */

#tracker-admin .jt-subnav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: var(--jt-hairline) solid var(--jt-line);
  margin-bottom: var(--jt-s5);
  scrollbar-width: thin;
}

#tracker-admin .jt-subnav__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--jt-s2);
  padding: 10px var(--jt-s4);
  margin-bottom: calc(var(--jt-hairline) * -1);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--jt-ink-3);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
#tracker-admin .jt-subnav__btn svg { width: var(--jt-icon-sm); height: var(--jt-icon-sm); }
#tracker-admin .jt-subnav__btn:hover { color: var(--jt-ink); }

/* .active la pone el JS actual; [aria-selected] es la versión accesible.
   Se aceptan las dos para no romper switchSubTab durante la migración.       */
#tracker-admin .jt-subnav__btn.active,
#tracker-admin .jt-subnav__btn[aria-selected="true"] {
  color: var(--jt-accent);
  border-bottom-color: var(--jt-accent);
}

#tracker-admin .jt-subnav__tag {
  padding: 1px 5px;
  border: var(--jt-hairline) solid var(--jt-accent-line);
  border-radius: var(--jt-r-sm);
  background: var(--jt-accent-soft);
  color: var(--jt-accent);
  font-size: var(--jt-t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* =============================================================================
   6 · FRANJA DE KPI
   Sustituye a los cinco degradados saturados. Sigue siendo un filtro clicable.
   ============================================================================= */

#tracker-admin .jt-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-md);
  background: var(--jt-surface);
  margin-bottom: var(--jt-s4);
}

#tracker-admin .jt-kpi {
  position: relative;
  padding: var(--jt-s4);
  border: 0;
  border-right: var(--jt-hairline) solid var(--jt-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease;
}
#tracker-admin .jt-kpi:last-child { border-right: 0; }
#tracker-admin .jt-kpi:hover { background: var(--jt-surface-2); }

#tracker-admin .jt-kpi__value {
  font-size: var(--jt-t-metric);
  font-weight: 700;
  line-height: 1.1;
  color: var(--jt-ink);
  font-variant-numeric: tabular-nums;
}

#tracker-admin .jt-kpi__label {
  display: flex;
  align-items: center;
  gap: var(--jt-s2);
  margin-top: 3px;
  font-size: var(--jt-t-label);
  color: var(--jt-ink-2);
}

/* El punto de estado a 9px con flex-shrink:0.                               */
#tracker-admin .jt-dot {
  width: var(--jt-dot);
  height: var(--jt-dot);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--jt-neutral);
}

#tracker-admin .jt-kpi__label .jt-dot { box-shadow: 0 0 0 2.5px var(--jt-halo, transparent); }

#tracker-admin .jt-kpi[data-state="total"]     .jt-dot { background: var(--jt-neutral); --jt-halo: color-mix(in srgb, var(--jt-neutral) 18%, transparent); }
#tracker-admin .jt-kpi[data-state="pending"]   .jt-dot { background: var(--jt-warn);    --jt-halo: var(--jt-warn-soft); }
#tracker-admin .jt-kpi[data-state="loaded"]    .jt-dot { background: var(--jt-info);    --jt-halo: var(--jt-info-soft); }
#tracker-admin .jt-kpi[data-state="delivered"] .jt-dot { background: var(--jt-ok);      --jt-halo: var(--jt-ok-soft); }
#tracker-admin .jt-kpi[data-state="failed"]    .jt-dot { background: var(--jt-crit);    --jt-halo: var(--jt-crit-soft); }

/* Filtro activo: subrayado + fondo tenue. Soporta tanto aria-pressed como .active-filter */
#tracker-admin .jt-kpi:is([aria-pressed="true"], .active-filter) { background: var(--jt-accent-soft); }
#tracker-admin .jt-kpi:is([aria-pressed="true"], .active-filter)::after {
  content: "";
  position: absolute;
  inset: auto var(--jt-s4) 0 var(--jt-s4);
  height: 2px;
  background: var(--jt-accent);
}


/* =============================================================================
   7 · BARRA DE FILTROS Y CONTROLES
   ============================================================================= */

#tracker-admin .jt-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jt-s3);
  padding: var(--jt-s3) var(--jt-s4);
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-md);
  background: var(--jt-surface);
  margin-bottom: var(--jt-s4);
}
#tracker-admin .jt-filters__search { flex: 1 1 240px; min-width: 0; }

#tracker-admin .jt-input,
#tracker-admin .jt-select {
  width: 100%;
  padding: 8px var(--jt-s3);
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-sm);
  background: var(--jt-surface);
  color: var(--jt-ink);
  font: inherit;
}
#tracker-admin .jt-select { width: auto; }
#tracker-admin .jt-input::placeholder { color: var(--jt-ink-3); }

#tracker-admin .jt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--jt-s2);
  padding: 8px var(--jt-s4);
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-sm);
  background: var(--jt-raised);
  color: var(--jt-ink-2);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
#tracker-admin .jt-btn svg { width: var(--jt-icon-sm); height: var(--jt-icon-sm); }
#tracker-admin .jt-btn:hover { background: var(--jt-surface-2); color: var(--jt-ink); }

#tracker-admin .jt-btn--primary {
  background: var(--jt-accent);
  border-color: var(--jt-accent);
  color: var(--jt-ink-on-accent);
}
#tracker-admin .jt-btn--primary:hover { background: var(--jt-accent-2); border-color: var(--jt-accent-2); color: var(--jt-ink-on-accent); }

#tracker-admin .jt-btn--danger { color: var(--jt-crit); border-color: var(--jt-crit-line); background: var(--jt-crit-soft); }
#tracker-admin .jt-btn--icon  { padding: 7px; }
#tracker-admin .jt-btn--sm    { padding: 5px 11px; font-size: var(--jt-t-label); }
#tracker-admin .jt-btn--sm svg { width: 14px; height: 14px; }

#tracker-admin .jt-btn:disabled { opacity: .5; cursor: not-allowed; }


/* =============================================================================
   8 · CHIPS DE ESTADO
   ============================================================================= */

#tracker-admin .jt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-pill);
  background: var(--jt-surface-2);
  color: var(--jt-ink-2);
  font-size: var(--jt-t-micro);
  font-weight: 600;
  white-space: nowrap;
}
#tracker-admin .jt-chip .jt-dot { width: var(--jt-dot-sm); height: var(--jt-dot-sm); background: currentColor; }

#tracker-admin .jt-chip[data-state="delivered"] { background: var(--jt-ok-soft);   border-color: var(--jt-ok-line);   color: var(--jt-ok); }
#tracker-admin .jt-chip[data-state="pending"]   { background: var(--jt-warn-soft); border-color: var(--jt-warn-line); color: var(--jt-warn); }
#tracker-admin .jt-chip[data-state="docked"]    { background: var(--jt-warn-soft); border-color: var(--jt-warn-line); color: var(--jt-warn); }
#tracker-admin .jt-chip[data-state="failed"],
#tracker-admin .jt-chip[data-state="exception"] { background: var(--jt-crit-soft); border-color: var(--jt-crit-line); color: var(--jt-crit); }
#tracker-admin .jt-chip[data-state="loaded"],
#tracker-admin .jt-chip[data-state="in_transit"]{ background: var(--jt-info-soft); border-color: var(--jt-info-line); color: var(--jt-info); }
#tracker-admin .jt-chip[data-state="live"]      { background: var(--jt-live-soft); border-color: var(--jt-live-line); color: var(--jt-live); }


/* =============================================================================
   9 · TARJETAS, SECCIONES Y TABLA
   ============================================================================= */

#tracker-admin .jt-card {
  padding: var(--jt-s5);
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-md);
  background: var(--jt-surface);
}

#tracker-admin .jt-section-title {
  margin: 0 0 var(--jt-s3);
  font-size: var(--jt-t-title);
  font-weight: 600;
  color: var(--jt-ink);
}

#tracker-admin .jt-eyebrow {
  font-size: var(--jt-t-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jt-ink-3);
}

#tracker-admin .jt-table-wrap {
  overflow-x: auto;
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-md);
  background: var(--jt-surface);
}

#tracker-admin .jt-table { width: 100%; border-collapse: collapse; font-size: var(--jt-t-body); }

#tracker-admin .jt-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--jt-s3) var(--jt-s4);
  border-bottom: var(--jt-hairline) solid var(--jt-line);
  background: var(--jt-surface-2);
  color: var(--jt-ink-3);
  font-size: var(--jt-t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

#tracker-admin .jt-table td {
  padding: var(--jt-s3) var(--jt-s4);
  border-bottom: var(--jt-hairline) solid var(--jt-line);
  color: var(--jt-ink-2);
  vertical-align: top;
}
#tracker-admin .jt-table tbody tr:last-child td { border-bottom: 0; }
#tracker-admin .jt-table tbody tr:hover td { background: var(--jt-surface-2); }
#tracker-admin .jt-table td strong { color: var(--jt-ink); font-weight: 600; }

#tracker-admin .jt-folio {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .86em;
  color: var(--jt-ink);
}
#tracker-admin .jt-num { text-align: right; font-variant-numeric: tabular-nums; }

#tracker-admin .jt-row--valid   td { background: var(--jt-ok-soft); }
#tracker-admin .jt-row--invalid td { background: var(--jt-crit-soft); }
#tracker-admin .jt-row--valid   td:first-child { box-shadow: inset 4px 0 0 var(--jt-ok); }
#tracker-admin .jt-row--invalid td:first-child { box-shadow: inset 4px 0 0 var(--jt-crit); }

/* Nombres heredados que el JS de la rejilla sigue escribiendo. Vivian en dos
   bloques <style> duplicados dentro del partial, con la paleta a mano: por eso
   la rejilla de importacion se quedaba en claro con el resto en oscuro.       */
#tracker-admin .row-valid   td { background-color: var(--jt-ok-soft) !important; }
#tracker-admin .row-invalid td { background-color: var(--jt-crit-soft) !important; }
#tracker-admin .row-valid   { border-left: 6px solid var(--jt-ok) !important; }
#tracker-admin .row-invalid { border-left: 6px solid var(--jt-crit) !important; }

/* Rejilla de validacion de destinos: columnas fijas al hacer scroll lateral. */
#tracker-admin .map-grid-sticky-trash,
#tracker-admin .map-grid-sticky-l1,
#tracker-admin .map-grid-sticky-l2 {
  position: sticky;
  background: inherit;
  border-right: var(--jt-hairline) solid var(--jt-line);
}
#tracker-admin .map-grid-sticky-trash { left: 0;    z-index: 6; width: 40px;  text-align: center; }
#tracker-admin .map-grid-sticky-l1    { left: 40px; z-index: 5; width: 50px;  text-align: center; }
#tracker-admin .map-grid-sticky-l2    { left: 90px; z-index: 5; width: 120px; font-weight: 700;
                                        border-right: 2px solid var(--jt-line-strong); }

#tracker-admin .map-grid-cell { padding: var(--jt-s3); border-bottom: var(--jt-hairline) solid var(--jt-line); }

#tracker-admin .map-grid-editable {
  cursor: text;
  border: 1px dashed transparent;
  transition: background .2s ease, border-color .2s ease;
}
#tracker-admin .map-grid-editable:hover {
  background: var(--jt-surface-2);
  border-color: var(--jt-line-strong);
}

#tracker-admin .map-grid-input {
  width: 100%;
  min-width: 300px;
  padding: var(--jt-s1);
  border: 1px solid var(--jt-accent);
  border-radius: var(--jt-r-sm);
  background: var(--jt-surface);
  color: var(--jt-ink);
  outline: none;
  box-shadow: var(--jt-ring);
}

/* Rejillas responsivas heredadas del partial. */
#tracker-admin .tracker-charts-grid > div { min-width: 0; overflow: hidden; }
@media (max-width: 992px) {
  #tracker-admin .tracker-stats-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  #tracker-admin .tracker-charts-grid { grid-template-columns: 1fr !important; }
}


/* =============================================================================
   10 · SUBPESTAÑA RUTEO  ·  mapa a altura completa + panel de paradas
   ============================================================================= */

#tracker-admin .jt-route {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(260px, 1fr);
  overflow: hidden;
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-md);
  background: var(--jt-surface);
  min-height: 560px;
}

#tracker-admin .jt-route__map { position: relative; background: var(--jt-surface-2); }

/* Leaflet mide su contenedor al crearlo. Anclarlo al panel evita que nazca de
   0 px cuando la subpestania todavia estaba oculta. */
#tracker-admin .jt-route__map > #tracker-map { position: absolute; inset: 0; }

#tracker-admin .jt-route__map .leaflet-container { width: 100%; height: 100%; background: var(--jt-surface-2); }

/* Inversión en modo oscuro para tiles de OSM (soporta vista Ruteo y vista Monitor) */
body.dark-mode #tracker-admin :is(.jt-route__map, #tracker-map) .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.7);
}

#tracker-admin .jt-route__legend {
  position: absolute;
  left: var(--jt-s3);
  bottom: var(--jt-s3);
  z-index: 400;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#tracker-admin .jt-route__side {
  display: flex;
  flex-direction: column;
  border-left: var(--jt-hairline) solid var(--jt-line);
  min-height: 0;
}

#tracker-admin .jt-route__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jt-s2);
  padding: var(--jt-s3) var(--jt-s4);
  border-bottom: var(--jt-hairline) solid var(--jt-line);
}

#tracker-admin .jt-stops { flex: 1; overflow-y: auto; min-height: 0; }

#tracker-admin .jt-stop {
  display: flex;
  align-items: flex-start;
  gap: var(--jt-s3);
  padding: var(--jt-s3) var(--jt-s4);
  border-bottom: var(--jt-hairline) solid var(--jt-line);
  cursor: grab;
}
#tracker-admin .jt-stop:hover { background: var(--jt-surface-2); }
#tracker-admin .jt-stop[aria-grabbed="true"] { opacity: .5; cursor: grabbing; }

#tracker-admin .jt-stop__seq {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border: var(--jt-hairline) solid var(--jt-accent-line);
  border-radius: 50%;
  background: var(--jt-accent-soft);
  color: var(--jt-accent);
  font-size: var(--jt-t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#tracker-admin .jt-stop__addr { color: var(--jt-ink-3); font-size: var(--jt-t-label); }

#tracker-admin .jt-stop__ctrls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
#tracker-admin .jt-stop__btn {
  background: transparent;
  border: 1px solid var(--jt-line);
  border-radius: 4px;
  color: var(--jt-ink-2);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 8px;
  line-height: 1;
}
#tracker-admin .jt-stop__btn:hover:not(:disabled) {
  background: var(--jt-surface-3);
  color: var(--jt-ink);
}
#tracker-admin .jt-stop__btn:disabled {
  opacity: .25;
  cursor: not-allowed;
}

#tracker-admin .jt-route__actions {
  display: flex;
  flex-direction: column;
  gap: var(--jt-s2);
  padding: var(--jt-s3) var(--jt-s4);
  border-top: var(--jt-hairline) solid var(--jt-line);
}


/* =============================================================================
   11 · EVIDENCIAS  ·  agrupadas por entrega, no por archivo
   ============================================================================= */

#tracker-admin .jt-evidence-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--jt-s4);
}

#tracker-admin .jt-ev {
  display: flex;
  flex-direction: column;
  gap: var(--jt-s3);
  padding: var(--jt-s4);
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-md);
  background: var(--jt-surface);
}

#tracker-admin .jt-ev__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--jt-s3);
  flex-wrap: wrap;
}
#tracker-admin .jt-ev__client { color: var(--jt-ink-3); font-size: var(--jt-t-label); }

#tracker-admin .jt-ev__meta { font-size: var(--jt-t-label); color: var(--jt-ink-2); line-height: 1.5; }
#tracker-admin .jt-ev__meta dt {
  display: inline;
  color: var(--jt-ink-3);
  font-size: var(--jt-t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
}
#tracker-admin .jt-ev__meta dd { display: inline; margin: 0 var(--jt-s3) 0 var(--jt-s1); }

#tracker-admin .jt-ev__files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--jt-s2);
}

#tracker-admin .jt-file {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-sm);
  background: var(--jt-surface-2);
  text-decoration: none;
  color: inherit;
}
#tracker-admin .jt-file:hover { border-color: var(--jt-accent-line); box-shadow: var(--jt-shadow); }

#tracker-admin .jt-file__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 82px;
  background: var(--jt-surface-3);
}

/* Fotografía: recorte aceptable */
#tracker-admin .jt-file[data-kind="photo"] .jt-file__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Firma: siempre contain */
#tracker-admin .jt-file[data-kind="signature"] .jt-file__thumb { background: var(--jt-surface); padding: var(--jt-s2); }
#tracker-admin .jt-file[data-kind="signature"] .jt-file__thumb img { width: 100%; height: 100%; object-fit: contain; }
body.dark-mode #tracker-admin .jt-file[data-kind="signature"] .jt-file__thumb img { filter: invert(1); }

/* Documento: ficha visual nativa */
#tracker-admin .jt-file[data-kind="document"] .jt-file__thumb { background: var(--jt-surface); color: var(--jt-crit); }
#tracker-admin .jt-file[data-kind="document"] .jt-file__thumb svg { width: 28px; height: 28px; }

#tracker-admin .jt-file__name {
  padding: 6px 8px;
  border-top: var(--jt-hairline) solid var(--jt-line);
  background: var(--jt-surface);
  color: var(--jt-ink-2);
  font-size: var(--jt-t-micro);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =============================================================================
   12 · ZONA DE CARGA, ESTADOS VACÍOS Y CARGANDO
   ============================================================================= */

#tracker-admin .jt-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--jt-s2);
  min-height: 280px;
  padding: var(--jt-s6);
  border: 2px dashed var(--jt-line-strong);
  border-radius: var(--jt-r-md);
  background: var(--jt-surface-2);
  color: var(--jt-ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
#tracker-admin .jt-dropzone:hover,
#tracker-admin .jt-dropzone[data-dragover] { border-color: var(--jt-accent); background: var(--jt-accent-soft); }
#tracker-admin .jt-dropzone svg { width: 40px; height: 40px; color: var(--jt-ink-3); }

#tracker-admin .jt-empty {
  padding: var(--jt-s6) var(--jt-s5);
  color: var(--jt-ink-3);
  text-align: center;
  font-size: var(--jt-t-label);
}

#tracker-admin .jt-skeleton {
  border-radius: var(--jt-r-sm);
  background: linear-gradient(90deg, var(--jt-surface-2) 25%, var(--jt-surface-3) 50%, var(--jt-surface-2) 75%);
  background-size: 200% 100%;
  animation: jt-shimmer 1.4s ease-in-out infinite;
}
@keyframes jt-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }


/* =============================================================================
   13 · MODALES
   ============================================================================= */

#tracker-admin .jt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--jt-s4);
  background: rgba(28, 25, 23, .58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#tracker-admin .jt-modal[data-open] { display: flex; }

#tracker-admin .jt-modal__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow: hidden;
  border: var(--jt-hairline) solid var(--jt-line);
  border-radius: var(--jt-r-lg);
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow-pop);
}
#tracker-admin .jt-modal__head,
#tracker-admin .jt-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jt-s3);
  padding: var(--jt-s4) var(--jt-s5);
}
#tracker-admin .jt-modal__head { border-bottom: var(--jt-hairline) solid var(--jt-line); }
#tracker-admin .jt-modal__foot { border-top: var(--jt-hairline) solid var(--jt-line); justify-content: flex-end; }
#tracker-admin .jt-modal__body { flex: 1; overflow-y: auto; padding: var(--jt-s5); }

/* Sustituye a .btn-close de Bootstrap, que pintaba una X en un SVG de color
   fijo: invisible sobre cabeceras oscuras. */
#tracker-admin .jt-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--jt-r-sm);
  background: transparent;
  color: currentColor;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  opacity: .65;
  cursor: pointer;
}
#tracker-admin .jt-modal__close::before { content: "d7"; }
#tracker-admin .jt-modal__close:hover { opacity: 1; background: var(--jt-surface-2); }


/* =============================================================================
   14 · ACCESIBILIDAD Y RESPUESTA
   ============================================================================= */

/* Foco visible */
#tracker-admin :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--jt-accent);
  outline-offset: 2px;
  border-radius: var(--jt-r-sm);
}

/* Iconos: una sola familia, monocromatica, heredando el color del texto.
   Prohibido fluent-color, flat-color-icons y emoji dentro del modulo.

   El tamanio por defecto va aqui, no en cada componente: un <svg> sin ancho
   se estira hasta llenar a su contenedor. Le paso al icono de la cabecera y
   ocupo el alto entero de la banda verde.

   Leaflet queda fuera por partida doble: su <svg> de superposicion lleva la
   clase .leaflet-zoom-animated -y se rompe si se le fija un tamanio- y sus
   trazos son descendientes de ese svg -y desaparecen si se les quita el fill-. */
#tracker-admin svg:not(.leaflet-zoom-animated):not(.leaflet-zoom-animated *),
.jt-modal svg,
#tracker-evidence-modal svg,
#tracker-assign-modal svg,
#tracker-scanitems-modal svg,
#perla-column-mapping-modal svg,
#tracker-docs-modal svg,
svg.jt-icon {
  width: var(--jt-icon, 18px);
  height: var(--jt-icon, 18px);
  max-width: var(--jt-icon, 18px);
  max-height: var(--jt-icon, 18px);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  display: inline-block;
}

.jt-modal .modal-content,
#tracker-evidence-modal .modal-content,
#tracker-assign-modal .modal-content,
#tracker-scanitems-modal .modal-content,
#perla-column-mapping-modal .modal-content,
#tracker-docs-modal .modal-content {
  background: var(--jt-surface, #ffffff) !important;
  color: var(--jt-ink, #292524) !important;
  border: var(--jt-hairline) solid var(--jt-line) !important;
}

.jt-modal .modal-header,
.jt-modal .modal-footer,
#tracker-evidence-modal .modal-header,
#tracker-evidence-modal .modal-footer {
  background: var(--jt-surface-2, #f4f3f1) !important;
  border-color: var(--jt-line, #e7e5e4) !important;
  color: var(--jt-ink, #292524) !important;
}

/* El unico icono que no es de 18px: la marca del modulo. */
#tracker-admin .jt-header__title > svg {
  width: 26px;
  height: 26px;
  align-self: center;
}

@media (max-width: 1100px) {
  #tracker-admin .jt-route { grid-template-columns: 1fr; min-height: 0; }
  #tracker-admin .jt-route__map { min-height: 380px; }
  #tracker-admin .jt-route__side { border-left: 0; border-top: var(--jt-hairline) solid var(--jt-line); }
}

@media (max-width: 900px) {
  #tracker-admin .jt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tracker-admin .jt-kpi { border-bottom: var(--jt-hairline) solid var(--jt-line); }
  #tracker-admin .jt-kpi:nth-child(2n) { border-right: 0; }
  #tracker-admin .jt-kpi:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}

@media (max-width: 640px) {
  #tracker-admin .jt-header { padding: var(--jt-s3) var(--jt-s4); }
  #tracker-admin .jt-header__title { font-size: var(--jt-t-title); }
  #tracker-admin .jt-evidence-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #tracker-admin *,
  #tracker-admin *::before,
  #tracker-admin *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  #tracker-admin .jt-header { background: none; color: #000; border-bottom: 2px solid #000; }
  #tracker-admin .jt-subnav,
  #tracker-admin .jt-modality,
  #tracker-admin .jt-filters,
  #tracker-admin .jt-route__actions { display: none; }
}


/* =============================================================================
   15 · COMPATIBILIDAD — puente durante la migración
   ============================================================================= */

#tracker-admin .jade-kpi-card { /* soporte retrocompatible */ }
#tracker-admin .jade-subnav-btn.active { color: var(--jt-accent); }
#tracker-admin .card { background: var(--jt-surface); border-color: var(--jt-line); }