:root {
  color-scheme: light;
  --ink: #18232f;
  --muted: #70808f;
  --border: #dfe5e9;
  --soft: #f4f6f7;
  --paper: #ffffff;
  --navy: #102b44;
  --blue: #1769aa;
  --orange: #ed683f;
  --window-bottom-safe: 0px;
  font-family: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { height: 100vh; margin: 0; overflow: hidden; color: var(--ink); background: #eef1f3; min-width: 1280px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
button, input, select { font: inherit; }
button, select, label[for] { cursor: pointer; }

.topbar {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  color: white;
  background: var(--navy);
  border-bottom: 4px solid var(--orange);
}
.brand-block, .topbar-actions, .section-heading, .map-toolbar, .results-heading { display: flex; align-items: center; }
.brand-block { gap: 14px; }
.brand-mark { width: 46px; height: 38px; border: 3px solid white; border-radius: 23px 23px 10px 10px; position: relative; }
.brand-mark::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 7px; height: 3px; background: white; box-shadow: 0 -8px 0 white; }
.brand-mark span { position: absolute; width: 8px; height: 8px; left: 16px; bottom: -7px; background: var(--orange); transform: rotate(45deg); }
.eyebrow { margin: 0 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #7f8e9c; }
.topbar .eyebrow { color: #a7bac9; }
h1, h2 { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; margin: 0; line-height: 1.1; }
h1 { font-size: 23px; }
h2 { font-size: 20px; }
.topbar-actions { gap: 12px; }
.data-status { display: flex; align-items: center; gap: 9px; padding-right: 18px; border-right: 1px solid #31506a; color: #d6e0e7; font-size: 13px; }
.data-status b { color: white; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #42d19a; box-shadow: 0 0 0 4px rgba(66,209,154,.12); }
.button { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 7px; font-size: 13px; font-weight: 700; }
.button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.button-primary { background: var(--orange); color: white; }

.app-shell { height: calc(100vh - 84px - var(--window-bottom-safe)); display: grid; grid-template-columns: 255px minmax(520px, 1fr) clamp(330px, 24vw, 430px); overflow: hidden; }
.sidebar { background: var(--paper); border-right: 1px solid var(--border); padding: 20px 16px; overflow-y: auto; }
.sidebar section + section { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--border); }
.section-heading, .map-toolbar, .results-heading { justify-content: space-between; }
.text-button { border: 0; background: transparent; color: var(--blue); font-weight: 700; font-size: 12px; padding: 5px 0; }
.field { display: grid; gap: 7px; margin-top: 14px; }
.field > span { font-size: 12px; color: #546473; font-weight: 700; }
select, .search-field { height: 42px; border: 1px solid #d7dee3; border-radius: 7px; background: white; color: var(--ink); }
select { padding: 0 36px 0 12px; width: 100%; }
select:disabled { color: #8c99a4; background: #f5f7f8; cursor: default; }
.date-field select { height: 38px; font-weight: 700; color: var(--navy); }
.segmented { display: flex; padding: 3px; background: var(--soft); border-radius: 7px; }
.segmented button { flex: 1; border: 0; border-radius: 5px; background: transparent; padding: 8px 3px; color: #667684; font-size: 11px; font-weight: 700; }
.segmented button.active { background: white; color: var(--navy); box-shadow: 0 1px 4px #2134471f; }
.check-filter { overflow: hidden; border: 1px solid #d7dee3; border-radius: 7px; background: white; }
.check-actions { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: var(--soft); border-bottom: 1px solid var(--border); }
.check-actions span { color: var(--muted); font-size: 9px; font-weight: 700; }
.check-actions div { display: flex; gap: 5px; }
.check-actions button { padding: 2px 5px; border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 800; }
.check-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-height: 142px; overflow-y: auto; padding: 5px; }
#lineFilter .check-actions { padding: 3px 5px; }
#lineFilter .check-actions span { font-size: 8px; }
#lineFilter .check-actions button { padding: 1px 3px; font-size: 8px; }
#lineFilter .check-options { grid-template-columns: repeat(8, minmax(0, 1fr)); max-height: 38px; overflow: hidden; padding: 2px; }
#lineFilter .check-option { justify-content: center; gap: 2px; padding: 2px 1px; font-size: 8px; }
#lineFilter .check-option input { width: 11px; height: 11px; }
.company-filter .check-options { grid-template-columns: 1fr; max-height: 126px; }
.area-filter .check-options { grid-template-columns: 1fr; max-height: 96px; }
.vehicle-filter .check-options { grid-template-columns: 1fr; max-height: 112px; }
.check-option { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 4px; border-radius: 4px; color: #465765; font-size: 10px; font-weight: 600; }
.check-option:hover { background: #f3f6f8; }
.check-option input { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }
.check-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-empty { padding: 10px; color: var(--muted); font-size: 10px; }
.search-field { display: flex; align-items: center; gap: 8px; padding: 0 11px; margin-top: 14px; }
.search-field svg { width: 18px; fill: none; stroke: #84929d; stroke-width: 2; }
.search-field input { border: 0; outline: 0; width: 100%; font-size: 12px; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.summary-grid article { padding: 14px 12px; background: var(--soft); border-radius: 7px; }
.summary-grid strong { display: block; color: var(--navy); font: 800 26px "Segoe UI Variable Display", "Segoe UI", sans-serif; }
.summary-grid span { font-size: 10px; color: var(--muted); }
.company-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.company-legend button { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 20px; background: white; font-size: 10px; font-weight: 700; }
.company-legend i { width: 8px; height: 8px; border-radius: 50%; }
.muted { color: var(--muted); font-size: 11px; }
.direction-card { display: flex; align-items: center; gap: 11px; padding: 13px !important; border: 1px solid #d9e5ed !important; border-radius: 8px; background: #f5f9fc; }
.direction-icon { flex: 0 0 auto; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: white; background: var(--blue); font-size: 11px; font-weight: 800; }
.direction-card strong { font-size: 11px; }
.direction-card p { margin: 3px 0 0; font-size: 10px; color: var(--muted); line-height: 1.35; }

.workspace { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.map-tools, .track-key { display: flex; align-items: center; }
.map-tools { gap: 12px; }
.map-tools-floating { position: absolute; z-index: 7; top: 16px; right: 18px; padding: 6px; background: rgba(255,255,255,.94); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 5px 18px rgba(30,48,63,.08); }
.layout-switch { width: 190px; border: 1px solid var(--border); }
.layout-switch button { padding: 7px 9px; }
.track-key { gap: 15px; font-size: 10px; font-weight: 700; color: var(--muted); }
.track-key span { display: flex; align-items: center; gap: 6px; }
.map-nav-hint { color: #87949e; font-size: 9px; font-weight: 600; white-space: nowrap; }
.zoom-controls { display: flex; align-items: center; }
.zoom-controls .zoom-button { border-radius: 0; border-right-width: 0; font-size: 20px; font-weight: 500; line-height: 1; }
.zoom-controls .zoom-button:first-child { border-radius: 6px 0 0 6px; }
.zoom-controls .zoom-button:last-child { border-right-width: 1px; border-radius: 0 6px 6px 0; }
.track-sample { width: 22px; height: 4px; border-radius: 4px; background: #5c6a75; position: relative; }
.track-one::after { content: ""; position: absolute; right: 0; top: -3px; border-left: 5px solid #5c6a75; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.track-two::after { content: ""; position: absolute; left: 0; top: -3px; border-right: 5px solid #5c6a75; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: white; }
.icon-button svg { width: 18px; fill: none; stroke: var(--navy); stroke-width: 2; }
.map-viewport { position: relative; min-height: 0; overflow: hidden; background: #f8fafb; }
.drop-zone { display: flex; align-items: center; gap: 10px; width: 285px; padding: 8px 11px; text-align: left; color: var(--navy); background: rgba(255,255,255,.97); border: 1.5px dashed #8eabba; border-radius: 8px; transition: .18s ease; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--orange); background: #fff9f6; transform: translateY(-1px); }
.drop-zone.dragging { box-shadow: 0 0 0 4px rgba(237,104,63,.12); }
.drop-zone.loaded { border-style: solid; border-color: #71b7a4; }
.drop-zone.loaded .drop-icon { background: #e2f4ef; color: #16876c; }
.drop-zone strong, .drop-zone small { display: block; }
.drop-zone strong { font-size: 11px; }
.drop-zone small { max-width: 218px; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.drop-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; color: var(--blue); background: #e8f1f7; border-radius: 7px; }
.drop-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
#metroMap { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; }
#metroMap.is-panning { cursor: grabbing; }
#schematicBackground { opacity: 1; transition: opacity .18s ease; }
#schematicBackground.dimmed { opacity: .26; }
.grid-line { stroke: #e9eef1; stroke-width: 1; stroke-dasharray: 2 6; }
.line-halo { fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; }
.metro-line { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.metro-line.muted-line { opacity: .16; }
.metro-line.selected-line { opacity: .96; filter: drop-shadow(0 1px 1px rgba(12,30,45,.3)); }
.station-ring { fill: white; stroke: #344452; stroke-width: 2.5; }
.station-name { font: 700 12px "Segoe UI", sans-serif; fill: #243340; paint-order: stroke; stroke: #f8fafb; stroke-width: 4; stroke-linejoin: round; }
.line-badge text { fill: white; font: 800 20px "Segoe UI Variable Display", "Segoe UI", sans-serif; }
.job-segment { fill: none; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; opacity: .85; filter: drop-shadow(0 2px 1px rgba(26,39,50,.28)); transition: opacity .16s, filter .16s; }
.job-segment:hover, .job-segment.hovered, .job-segment.selected { opacity: 1; }
.job-segment.selected { filter: drop-shadow(0 2px 2px rgba(16,26,34,.55)); }
.job-segment.unknown-track { stroke-dasharray: 7 6; }
.job-segment.traction-cut { stroke-dasharray: 12 8; stroke-linecap: butt; }
.job-segment.track-reservation { stroke-dasharray: 13 5 1 5; stroke-linecap: round; }
.job-hit-area { fill: none; stroke: transparent; cursor: pointer; }
.job-marker { cursor: pointer; filter: drop-shadow(0 2px 2px rgba(20,32,43,.25)); }
.job-marker .marker-symbol { stroke: white; stroke-linejoin: round; }
.job-marker .marker-symbol-label { fill: white; font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; font-weight: 900; letter-spacing: -.04em; paint-order: stroke; stroke: rgba(0,0,0,.16); stroke-width: .5px; pointer-events: none; }
.job-marker:hover .marker-symbol, .job-marker.selected .marker-symbol { stroke-width: 2.8px; }
.map-job-tooltip { position: absolute; z-index: 8; width: min(340px, calc(100% - 24px)); padding: 12px 14px; color: #243340; background: rgba(255,255,255,.97); border: 1px solid #d6e0e6; border-radius: 12px; box-shadow: 0 8px 26px rgba(15,40,58,.24); transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; }
.map-job-tooltip.below { transform: translate(-50%, 12px); }
.map-job-tooltip[hidden] { display: none; }
.map-job-tooltip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.map-job-tooltip strong { overflow: hidden; color: var(--navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.map-job-tooltip-type { flex: 0 0 auto; color: var(--blue); font-size: 10px; font-weight: 800; }
.map-job-tooltip-description { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: #4d5f6d; font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.map-job-tooltip.expanded { pointer-events: auto; }
.map-job-tooltip.expanded .map-job-tooltip-description { display: block; max-height: 220px; overflow-y: auto; white-space: normal; }
.map-job-tooltip-meta { margin-top: 8px; color: #7a8995; font-size: 9px; font-weight: 700; }
.facility-link { stroke: #697987; stroke-width: 1; stroke-dasharray: 2 2; }
.facility-symbol { fill: #fff; stroke: #2f4658; stroke-width: 1; }
.facility-code { fill: #18384f; font-family: "Segoe UI", sans-serif; font-weight: 900; }
.facility-name { fill: #263947; font-family: "Segoe UI", sans-serif; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }

.jobs-panel { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-left: 1px solid var(--border); }
.jobs-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.result-count { min-width: 34px; padding: 5px 8px; text-align: center; color: var(--navy); background: var(--soft); border-radius: 16px; font-size: 11px; font-weight: 800; }
.job-list { min-height: 0; overflow-y: auto; padding: 12px; }
.list-empty { display: grid; place-items: center; min-height: 140px; padding: 18px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; font-size: 11px; line-height: 1.5; }
.job-card { position: relative; display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 10px; margin-bottom: 9px; padding: 11px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.job-card:hover, .job-card.selected { border-color: #91a6b6; transform: translateY(-1px); }
.job-card.selected { box-shadow: 0 0 0 2px rgba(23,105,170,.12); }
.job-color { border-radius: 4px; background: var(--company-color); }
.job-card-body { min-width: 0; }
.job-card-head, .job-card-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.job-card-head strong { overflow: hidden; color: var(--navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.job-card-sub { margin-top: 5px; color: #667684; font-size: 9px; }
.job-card-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-area { margin-top: 4px; overflow: hidden; color: #82909b; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.job-route { margin-top: 7px; color: #263947; font-size: 10px; font-weight: 700; }
.job-description { display: -webkit-box; margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.job-type { flex: 0 0 auto; padding: 3px 6px; border-radius: 10px; font-size: 8px; font-weight: 800; }
.job-type.reserva { color: #9a2727; background: #fde7e5; }
.job-type.corte { color: #8b4d08; background: #fff0d8; }
.job-type.brigada { color: #08715e; background: #e5f6f1; }
.job-type.servicio { color: #245d91; background: #e7f1fa; }
.job-assets { margin-top: 7px; color: #3f5668; font-size: 9px; font-weight: 700; }

.toast { position: fixed; z-index: 20; right: 22px; top: 98px; max-width: 430px; padding: 12px 16px; color: white; background: #1d4f45; border-radius: 7px; box-shadow: 0 8px 30px #10213135; font-size: 12px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #953f37; }

@media (max-height: 760px) {
  .sidebar { padding-top: 14px; padding-bottom: 14px; }
  .sidebar section + section { margin-top: 15px; padding-top: 13px; }
}

@media (max-width: 1450px) {
  .map-nav-hint, .track-key { display: none; }
  .map-tools-floating { gap: 7px; }
}