/* ===== Tema ===== */
:root {
  --bg: #eef1f8; --bg-grad: radial-gradient(1200px 700px at 85% -15%, #e7ecff 0%, #eef1f8 55%);
  --panel: #ffffff; --panel-2: #f3f5fb; --border: #e3e8f2; --text: #1b2334; --muted: #6b768c;
  --accent: #6366f1; --accent-2: #8b5cf6; --accent-soft: #eef0ff;
  --goods: #f97316; --goods-soft: #fff2e8; --pax: #2563eb; --pax-soft: #e8f0ff;
  --ok: #16a34a; --late: #e11d48; --shadow: 0 10px 30px rgba(30,40,80,.08); --shadow-lg: 0 20px 50px rgba(30,40,80,.18);
}
[data-theme="dark"] {
  --bg: #0e1320; --bg-grad: radial-gradient(1200px 700px at 85% -15%, #1a2540 0%, #0e1320 55%);
  --panel: #161d2e; --panel-2: #1d2740; --border: #2a3450; --text: #e8edf7; --muted: #93a2bf;
  --accent: #7c8cff; --accent-2: #a78bfa; --accent-soft: #1e2747;
  --goods: #ff9142; --goods-soft: #3a2412; --pax: #6bb1ff; --pax-soft: #14243c;
  --ok: #37d67a; --late: #ff6b6b; --shadow: 0 10px 30px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg-grad); background-color: var(--bg); color: var(--text); min-height: 100vh; font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.err { color: var(--late); min-height: 18px; font-size: 13px; margin-top: 6px; }
.accent { color: var(--accent); }
.brand { font-weight: 800; font-size: 20px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
input, select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 11px 12px; font-size: 16px; }
input:focus, select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
button { font-family: inherit; }

/* ===== Login ===== */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 370px; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.login-sub { color: var(--muted); margin: 6px 0 18px; font-size: 13px; }
.login-card label { font-size: 12px; color: var(--muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.login-card button { margin-top: 18px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: 0; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; }
.brand .logo { font-size: 20px; }

/* ===== Barra superior (buscador) ===== */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.search { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.search .ac { position: relative; flex: 1 1 320px; min-width: 180px; }
.search .ac input { width: 100%; }
.segmented { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.segmented button { background: transparent; border: 0; color: var(--muted); padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 600; }
.segmented button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.search select { flex: 0 0 auto; }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: 0; border-radius: 12px; padding: 12px 20px; font-size: 15px; font-weight: 700; cursor: pointer; }

/* Autocompletado */
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; z-index: 50; padding: 6px; }
.suggest .item { padding: 10px 12px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.suggest .item small { color: var(--muted); font-variant-numeric: tabular-nums; }
.suggest .item:hover, .suggest .item.sel { background: var(--accent-soft); }
.suggest .item .nm { font-weight: 600; }
.suggest .empty { padding: 12px; color: var(--muted); font-size: 14px; }

/* ===== Cuerpo ===== */
.body { display: grid; grid-template-columns: 268px 1fr; }
.sidebar { position: sticky; top: 61px; align-self: start; height: calc(100vh - 61px); overflow-y: auto; background: transparent; padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.sheet-handle { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav button { text-align: left; background: transparent; border: 0; color: var(--muted); padding: 11px 12px; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 600; }
.side-nav button.active { background: var(--accent-soft); color: var(--accent); }
.side-section, .side-foot { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.side-section h3, .side-foot h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sidebar label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sidebar input, .sidebar select { width: 100%; }
.auto { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-top: 4px; cursor: pointer; }
.auto input { width: auto; }
.side-foot { margin-top: auto; }
.side-foot .who { font-size: 13px; margin-bottom: 4px; }
.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 10px; padding: 9px 12px; cursor: pointer; font-size: 13px; text-align: left; }
.ghost:hover { border-color: var(--accent); color: var(--accent); }

.content { padding: 20px 28px; max-width: 1560px; }
.content-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.status { color: var(--muted); flex: 1 1 auto; }
.status.err { color: var(--late); }
.export { display: flex; gap: 8px; flex-wrap: wrap; }
.export button { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 12px; cursor: pointer; font-size: 13px; }
.export button:hover { border-color: var(--accent); }

.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 34; display: none; }
.scrim.show { display: block; }
.bottomnav { display: none; }

/* ===== Resultados ===== */
.results { display: flex; flex-direction: column; gap: 10px; }
.grid-cols { grid-template-columns: 82px 94px 108px 132px minmax(150px,1.2fr) minmax(96px,0.8fr) 38px 98px; }
.c-time .sched { font-size: 11px; color: var(--muted); text-decoration: line-through; }
.c-eta { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.c-eta .eta { font-weight: 700; font-size: 14px; line-height: 1.25; }
.c-eta .eta small { display: block; font-weight: 600; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.c-eta .eta.soon { color: var(--goods); }
.c-eta .eta.now { color: var(--ok); font-size: 15px; }
.c-eta .eta.gone { color: var(--muted); font-weight: 500; }
.board-head { display: grid; gap: 12px; padding: 4px 16px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.row { display: grid; gap: 12px; align-items: center; cursor: pointer; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); transition: transform .08s, box-shadow .12s, border-color .12s; }
.row:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.row.goods { border-left: 4px solid var(--goods); }
.c-time .h { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 19px; }
.c-time .day { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.c-time .day.tomorrow { color: var(--goods); font-weight: 600; }
.c-time .delay { font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.c-time .delay.ok { color: var(--ok); } .c-time .delay.late { color: var(--late); font-weight: 600; }
.c-time .eta { font-size: 11px; color: var(--muted); } .c-time .eta.soon { color: var(--goods); font-weight: 600; }
.c-train .num { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px; }
.c-train .badge { margin-top: 5px; }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 9px; color: #fff; background: #64748b; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.plain { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-weight: 600; }
.c-od { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-od .from { font-weight: 700; }
.c-od .to { color: var(--muted); } .c-od .to .arrow { color: var(--accent); font-weight: 700; }
.c-loc { display: flex; align-items: center; gap: 7px; min-width: 0; }
.c-loc .pin { font-size: 15px; } .c-loc .name { font-weight: 600; color: var(--pax); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-loc.none { color: var(--muted); }
.c-plat { text-align: center; font-weight: 800; font-size: 17px; }
.c-state { font-size: 12.5px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.c-state.running { color: var(--ok); } .c-state.lost { color: var(--goods); } .c-state.pending { color: var(--muted); }
.badge { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.badge.goods { background: var(--goods-soft); color: var(--goods); }
.badge.pax { background: var(--pax-soft); color: var(--pax); }
.badge.plain { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }

/* ===== Móvil / tablet ===== */
@media (max-width: 980px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; transition: transform .25s ease; }
  .topbar.hide { transform: translateY(-100%); }
  .topbar .brand { font-size: 17px; }
  .search { flex-wrap: wrap; gap: 8px; }
  .search .ac { flex: 1 1 100%; }
  .search .segmented { flex: 1 1 auto; }
  .search .segmented button { padding: 9px 10px; }
  .search select { flex: 1 1 84px; min-width: 0; }
  .search .primary { flex: 0 0 auto; padding: 10px 16px; }

  .body { grid-template-columns: 1fr; }
  .content { padding: 16px 12px 84px; max-width: none; }

  /* lateral -> hoja inferior deslizante */
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; max-height: 78vh; width: auto; z-index: 45; background: var(--panel); border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg); transform: translateY(105%); transition: transform .24s ease; padding: 8px 16px 24px; }
  .sidebar.open { transform: translateY(0); }
  .sheet-handle { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--border); margin: 6px auto 10px; }
  .side-foot { margin-top: 8px; }

  .bottomnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0,0,0,.08); padding-bottom: env(safe-area-inset-bottom); }
  .bottomnav button { background: transparent; border: 0; color: var(--muted); padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; line-height: 1; }
  .bottomnav button .ic { font-size: 21px; line-height: 1; }
  .bottomnav button .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
  .bottomnav button.active { color: var(--accent); }

  .board-head { display: none; }
  .row {
    gap: 7px 10px; grid-template-columns: auto 1fr auto;
    grid-template-areas: "time eta plat" "train op op" "od od od" "loc loc state";
  }
  .row > .c-time { grid-area: time; }
  .row > .c-eta { grid-area: eta; align-self: center; text-align: center; }
  .row > .c-plat { grid-area: plat; align-self: center; }
  .row > .c-train { grid-area: train; align-self: center; display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--border); }
  .row > .c-train .badge { margin-top: 0; }
  .row > .c-op { grid-area: op; align-self: center; justify-self: start; padding-top: 9px; border-top: 1px solid var(--border); }
  .row > .c-od { grid-area: od; }
  .row > .c-loc { grid-area: loc; }
  .row > .c-state { grid-area: state; justify-content: flex-end; }
  .c-plat::before { content: "Vía "; font-size: 11px; color: var(--muted); font-weight: 500; }
}

/* ===== Modales ===== */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(15,20,35,.55); backdrop-filter: blur(4px); }
.modal-card { width: 100%; max-width: 390px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.modal-card h2 { margin: 0 0 12px; font-size: 17px; }
.modal-card label { font-size: 12px; color: var(--muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ===== Recorrido ===== */
.route-card { width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.route-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.route-title { font-weight: 800; font-size: 17px; } .route-sub { font-size: 13px; margin-top: 2px; }
.route-body { padding: 14px 20px 22px; overflow-y: auto; }
.route-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.route-top .ghost { font-size: 12px; padding: 6px 10px; }
.route-legend { font-size: 12px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }
.route-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.route-legend .d { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.route-legend .d.passed { background: var(--ok); } .route-legend .d.next { background: var(--panel); border: 2px solid var(--border); }
.tl { position: relative; margin-left: 6px; }
.tl-step { position: relative; padding: 2px 0 16px 26px; }
.tl-step::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: var(--border); }
.tl-step:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--border); }
.tl-step.passed .tl-dot { background: var(--ok); border-color: var(--ok); }
.tl-step.passed::before { background: var(--ok); }
.tl-step.minor { padding-bottom: 10px; opacity: .6; }
.tl-step.minor .tl-dot { width: 8px; height: 8px; left: 3px; top: 6px; }
.tl-name { font-weight: 700; } .tl-step.minor .tl-name { font-weight: 500; font-size: 13px; }
.tl-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.tl-meta .late { color: var(--late); font-weight: 600; }
.tl-train { position: relative; padding: 0 0 12px 26px; }
.tl-train .marker { position: absolute; left: -4px; top: -6px; font-size: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.tl-train .lbl { display: inline-block; margin-left: 4px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }

/* ===== Admin ===== */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.panel h2 { margin: 0 0 12px; font-size: 16px; }
.row-form { display: flex; gap: 10px; flex-wrap: wrap; }
.row-form input { flex: 1 1 160px; }
.users { width: 100%; border-collapse: collapse; }
.users th, .users td { text-align: left; padding: 11px; border-bottom: 1px solid var(--border); }
.users th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.users .role { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.users .role.admin { color: var(--goods); border-color: var(--goods); background: var(--goods-soft); }
.mini { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.mini.danger { color: var(--late); border-color: var(--late); }

@media print {
  .topbar, .sidebar, .bottomnav, .content-head .export, .content-head .status { display: none !important; }
  body { background: #fff; } .content { padding: 0; max-width: none; }
  .row { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; cursor: default; }
}

/* ===== Línea del tren (badge) ===== */
.c-train .line { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); vertical-align: middle; }
.route-head-actions, .map-head-actions { display: flex; align-items: center; gap: 8px; }

/* ===== Mapa ===== */
.map-modal { padding: 0; }
.map-card { width: 100%; height: 100%; max-width: 1100px; max-height: 92vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.map { flex: 1 1 auto; min-height: 320px; background: var(--panel-2); }
.map-msg { padding: 14px; color: var(--muted); text-align: center; }
.leaflet-popup-content { font: 13px/1.4 system-ui, sans-serif; }
.map-pop b { font-size: 14px; }
.map-pop .det { margin-top: 8px; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-weight: 600; width: 100%; }
.map-pop .meta { color: #667; }
.train-emoji { font-size: 22px; line-height: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
@media (max-width: 980px) { .map-card { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; } .map-modal { padding: 0; } }

/* ===== Acceso rápido (favoritos + recientes) ===== */
.quickbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.quickbar:empty { display: none; }
.qchip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 7px 13px; cursor: pointer; font-size: 13px; box-shadow: var(--shadow); }
.qchip:hover { border-color: var(--accent); color: var(--accent); }
.qchip .ic { font-size: 12px; }
.qchip.fav .ic { color: var(--goods); }

/* Botón favorito */
.fav { font-size: 18px; line-height: 1; padding: 8px 11px; }
.fav.on { color: var(--goods); border-color: var(--goods); }

/* Chips resumen (filtro rápido por tipo) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chips:empty { display: none; }
.chip-sum { background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 13px; cursor: pointer; font-size: 13px; font-weight: 600; }
.chip-sum b { color: var(--text); margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip-sum.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip-sum.active b { color: var(--accent); }
.chip-sum.goods.active { background: var(--goods-soft); border-color: var(--goods); color: var(--goods); }
.chip-sum.goods.active b { color: var(--goods); }

/* Spinner de carga */
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 16px; color: var(--muted); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-hint { text-align: center; color: var(--muted); padding: 40px 16px; }
.empty-hint .big { font-size: 40px; margin-bottom: 8px; }

/* Animación sutil de aparición de filas */
.row { animation: fadein .18s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .row { animation: none; } .spinner { animation-duration: 2s; } }

/* ===== Conmutador de administración ===== */
.admin-seg { display: flex; width: 100%; max-width: 420px; margin-bottom: 16px; }
.admin-seg button { flex: 1; }
.admin-sec { display: block; }

/* ===== Móvil: tarjetas más compactas (más info sin scroll) ===== */
@media (max-width: 980px) {
  .content { padding: 14px 12px 78px; }
  .results { gap: 9px; }
  .row { padding: 11px 13px; border-radius: 14px; }
  .c-time .h { font-size: 17px; }
  .c-time .day, .c-time .sched { font-size: 10px; }
  .c-time .delay { font-size: 11px; }
  .c-eta .eta { font-size: 13px; }
  .c-train .num { font-size: 15px; }
  .c-train .line { font-size: 10px; padding: 1px 6px; }
  .c-od .from { font-size: 14px; }
  .c-od .to { font-size: 13px; }
  .c-loc, .c-state { font-size: 12px; }
  .chip { font-size: 11px; padding: 4px 9px; }
  .c-plat { font-size: 16px; }
  .quickbar { gap: 6px; margin-bottom: 10px; }
  .qchip { padding: 6px 11px; font-size: 12px; }
  .chips { gap: 6px; margin-bottom: 10px; }
  .chip-sum { padding: 5px 11px; font-size: 12px; }
}

/* ===== Aviso de última señal / tren detenido (recorrido) ===== */
.route-status { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13px; margin-bottom: 12px; line-height: 1.35; }
.route-status .ic { font-size: 15px; flex: 0 0 auto; }
.route-status.fresh { background: var(--pax-soft); color: var(--pax); }
.route-status.stale { background: var(--goods-soft); color: var(--goods); }
.route-status.stopped { background: rgba(239,68,68,.14); color: var(--late); font-weight: 600; }
.route-status b { font-weight: 700; }