:root {
  --ink: #18382f;
  --muted: #718078;
  --line: #e1e8e3;
  --canvas: #f3f6f3;
  --green: #16835f;
  --load: #23a4c4;
  --finish: #e7ab3f;
  --exit: #299776;
  --danger: #bd4138;
  --radius: 18px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid #329cce;
  outline-offset: 3px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #74bba0;
  outline-offset: 1px;
}
a {
  color: var(--green);
}
[hidden] {
  display: none !important;
}
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 12px;
  background: #fff;
}
.skip-link:focus {
  top: 10px;
}
.app-header {
  height: 76px;
  background: #10382e;
  color: #fff;
  padding: 0 max(24px, calc((100% - 1440px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-weight: 750;
  font-size: 21px;
  letter-spacing: -0.6px;
}
.brand small {
  display: block;
  font-size: 10px;
  color: #a9c2b5;
  letter-spacing: 0.4px;
  font-weight: 450;
  margin-top: 3px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 1px solid #527d6b;
  border-radius: 11px;
  background: #21513f;
  color: #a6ebbf;
  font-size: 27px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-right time {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.live-label {
  font-size: 11px;
  color: #cef7dd;
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #80dbab;
  box-shadow: 0 0 0 4px #caffdf12;
}
.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #658976;
  background: #ffffff0a;
  color: white;
  font-size: 21px;
}
main {
  max-width: 1488px;
  padding: 30px 24px 20px;
  margin: auto;
  min-width: 0;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.55px;
  font-weight: 750;
  color: #798a7e;
  margin: 0 0 8px;
}
h1 {
  font-size: 30px;
  letter-spacing: -1px;
  margin: 0;
}
h2 {
  font-size: 21px;
  letter-spacing: -0.6px;
  margin: 0;
}
h3 {
  font-size: 15px;
  margin: 0 0 14px;
}
.page-heading p:last-child {
  font-size: 12px;
  color: var(--muted);
  margin: 9px 0 0;
}
.primary-button,
.secondary-button,
.text-button,
.action-button {
  border-radius: 10px;
  min-height: 42px;
  font-weight: 650;
  font-size: 12px;
  padding: 10px 15px;
}
.primary-button {
  border: 1px solid var(--green);
  background: var(--green);
  color: white;
  white-space: nowrap;
}
.secondary-button,
.action-button {
  border: 1px solid var(--line);
  background: #fff;
}
.text-button {
  background: transparent;
  border: 0;
  color: var(--green);
  padding-inline: 5px;
}
.primary-button:hover {
  background: #106c4e;
}
.secondary-button:hover,
.action-button:hover {
  background: #eff6f1;
}
.filter-panel {
  position: relative;
  display: grid;
  grid-template-columns: 175px minmax(160px, 1fr) minmax(190px, 1fr) auto;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  align-items: end;
}
.filter-panel label,
.form-grid label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  color: #62766a;
  font-weight: 650;
  min-width: 0;
}
input,
select,
textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid #d9e3dc;
  border-radius: 8px;
  background: #f9fbf9;
  padding: 11px 10px;
  font-size: 13px;
}
input[type="date"] {
  min-height: 42px;
  appearance: none;
}
.scope-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  padding: 13px 1px;
}
.dataset-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dataset-filter select {
  padding: 5px 22px 5px 8px;
  font-size: 11px;
  width: auto;
  background: transparent;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.metric-card {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 17px 20px;
  min-width: 0;
}
.metric-card strong {
  font-size: 29px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.metric-card > span:last-child {
  grid-column: 2;
  font-size: 11px;
  color: #52685c;
}
.metric-symbol {
  grid-row: span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 21px;
  background: #e7f6fb;
  color: #2385a0;
}
.waiting .metric-symbol {
  color: #ac741a;
  background: #fff3dc;
}
.departed .metric-symbol {
  color: var(--green);
  background: #e6f7ee;
}
.delayed .metric-symbol {
  color: var(--danger);
  background: #fceee9;
}
.metric-card:hover {
  border-color: #7ebd9f;
}
.metric-card.active {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}
.panel {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
  min-width: 0;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}
.small-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  text-align: right;
}
.chart-legend {
  display: flex;
  gap: 22px;
  font-size: 11px;
  color: #617167;
  margin-bottom: 16px;
}
.chart-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.started {
  background: var(--load);
}
.finished {
  background: var(--finish);
}
.exited {
  background: var(--exit);
}
.agency-figure {
  margin: 0;
}
.chart-area {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
}
.chart-axis {
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: #819083;
  text-align: right;
  padding-bottom: 1px;
}
.chart-plot {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--columns, 11), minmax(0, 1fr));
  gap: 7px;
  position: relative;
}
.chart-plot:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    #edf1ec calc(25% - 1px),
    #edf1ec 25%
  );
  pointer-events: none;
}
.agency-bar {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
}
.agency-bar.selected {
  background: #f0f7ee;
  outline: 1px solid #91bfa2;
}
.bar-trio {
  height: 180px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 0 8px;
}
.bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 20px;
  max-width: 28%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  position: relative;
}
.bar b {
  position: absolute;
  top: -17px;
  font-size: 9px;
  color: #536c5e;
  font-weight: 650;
}
.bar-label {
  display: block;
  min-height: 47px;
  margin-top: 12px;
  padding: 0 1px;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.bar-label small {
  display: block;
  color: #8c9b91;
  font-size: 8px;
  letter-spacing: 0.6px;
  margin-top: 4px;
}
.agency-figure figcaption {
  font-size: 10px;
  color: #809085;
  line-height: 1.6;
  margin: 13px 0 0;
}
.chart-navigation {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.chart-navigation button {
  min-height: 32px;
  padding: 4px 13px;
}
.agency-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border: 1px solid #cbe2d2;
  border-radius: 10px;
  margin-top: 12px;
  font-size: 12px;
  background: #f3faf4;
}
.agency-selection button {
  padding: 5px;
  background: none;
  border: 0;
  color: var(--green);
}
.count-pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0;
  vertical-align: middle;
  padding: 4px 7px;
  border-radius: 7px;
  background: #ecf3ec;
  margin-left: 5px;
}
.status-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.status-tabs button {
  padding: 8px 12px;
  min-height: 36px;
  background: #f4f7f3;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #758479;
}
.status-tabs button.active {
  background: #e4f3e9;
  border-color: #c0dfca;
  color: #176541;
}
.reference-note {
  font-size: 11px;
  line-height: 1.6;
  color: #7f8a82;
  margin: 0 0 20px;
  max-width: 900px;
}
.row-head,
.operation-row {
  display: grid;
  grid-template-columns: minmax(115px, 1fr) minmax(105px, 0.9fr) minmax(
      240px,
      1.9fr
    ) minmax(115px, 1fr) minmax(115px, 1fr) 32px;
  align-items: center;
  gap: 12px;
}
.row-head {
  background: #f6f8f5;
  border-radius: 8px;
  padding: 12px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7d8b80;
}
.operation-row {
  padding: 19px 12px;
  border-bottom: 1px solid #eaf0e9;
  position: relative;
}
.unit-name {
  font-size: 16px;
  letter-spacing: 0.1px;
  font-weight: 750;
  display: block;
}
.unit-meta {
  display: block;
  font-size: 10px;
  color: #87938a;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.route-code {
  display: block;
  color: #388066;
  font-size: 10px;
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.dataset-tag {
  display: inline-block;
  color: #8a7b50;
  background: #f8f3e5;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 8px;
  margin-top: 5px;
}
.route-cell strong {
  font-size: 11px;
  display: block;
}
.route-cell span {
  display: block;
  font-size: 10px;
  color: #7f8d82;
  margin-top: 5px;
}
.stage-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.stage {
  padding: 9px 6px;
  background: #f4f7f4;
  border-radius: 7px;
  min-width: 0;
}
.stage span {
  display: block;
  font-size: 8px;
  color: #869187;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.stage strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  display: block;
}
.stage small {
  font-size: 9px;
  color: #87938a;
}
.stage.done {
  background: #f0f7f2;
}
.stage.current {
  background: #edf7fb;
}
.stage.pending strong {
  font-size: 10px;
  color: #8e9990;
  font-weight: 450;
}
.phase-badge {
  font-size: 9px;
  font-weight: 650;
  color: #25849c;
  background: #ebf6fb;
  border-radius: 6px;
  padding: 5px 7px;
  display: inline-block;
  margin-top: 8px;
}
.phase-badge.waiting {
  color: #9b711c;
  background: #fcf2df;
}
.phase-badge.departed {
  color: #1b805d;
  background: #e9f6ee;
}
.phase-badge.registered {
  color: #748078;
  background: #f0f3ee;
}
.timer-block {
  min-width: 0;
}
.timer-block > strong {
  display: block;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}
.timer-block > span {
  display: block;
  font-size: 9px;
  color: #88968b;
  margin-bottom: 4px;
}
.timer-block small {
  display: block;
  color: #819086;
  font-size: 9px;
  margin-top: 5px;
  line-height: 1.6;
}
.timer-block em {
  font-style: normal;
  font-size: 8px;
  color: #85938a;
}
.timer-block.overdue > strong {
  color: var(--danger);
}
.timer-block .past-slow {
  color: #a77130;
}
.row-open {
  width: 32px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: #327a58;
}
.row-open span {
  display: none;
}
.row-alert {
  grid-column: 1/-1;
  font-size: 11px;
  background: #fff1eb;
  color: #b24b37;
  border-radius: 7px;
  padding: 9px 11px;
  line-height: 1.5;
}
.row-alert.anomaly {
  background: #fff9e6;
  color: #9b752e;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 10px;
  color: var(--muted);
}
.pagination button {
  font-size: 10px;
  min-height: 34px;
  padding: 7px 11px;
}
.empty-state {
  padding: 35px 12px;
  text-align: center;
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px;
}
.empty-state strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}
.notice {
  padding: 12px 15px;
  border: 1px solid #cbe3ce;
  background: #ecf8ee;
  border-radius: 10px;
  color: #256840;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.5;
}
.notice.error {
  border-color: #efc6bd;
  color: #b74632;
  background: #fff3ee;
}
.system-panel {
  padding: 17px 20px;
  font-size: 12px;
  color: #62776a;
}
.system-panel summary {
  cursor: pointer;
  font-weight: 650;
}
.system-health {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
  font-size: 11px;
}
.system-health span {
  padding: 7px 10px;
  background: #f0f5ef;
  border-radius: 7px;
}
.message-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.message-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #f5f8f3;
  border-radius: 8px;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.message-item p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
}
.message-item small {
  color: #8d9990;
}
footer {
  color: #8b988f;
  font-size: 10px;
  text-align: center;
  padding: 10px 0 20px;
}
dialog {
  border: 0;
  padding: 0;
  color: var(--ink);
  box-shadow: 0 20px 80px #0a302b33;
}
dialog::backdrop {
  background: #0b292077;
  backdrop-filter: blur(3px);
}
.detail-dialog {
  width: min(740px, 94vw);
  max-height: 90dvh;
  border-radius: 18px;
  overflow: auto;
  overscroll-behavior: contain;
}
.detail-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 23px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.detail-header h2 {
  font-size: 22px;
}
.detail-header p:last-child {
  font-size: 11px;
  color: var(--muted);
  margin: 7px 0 0;
}
.close-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #f4f7f2;
  font-size: 23px;
}
.detail-body {
  padding: 23px;
}
.detail-body .stage-strip {
  margin-bottom: 16px;
}
.detail-body .stage {
  padding: 13px 10px;
}
.detail-body .stage strong {
  font-size: 18px;
}
.detail-body .stage span {
  font-size: 10px;
}
.detail-timers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.detail-timers .timer-block {
  background: #f4f8f3;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
}
.detail-timers .timer-block strong {
  font-size: 24px;
}
.detail-timers .timer-block small {
  font-size: 11px;
}
.detail-section {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 12px;
}
.detail-meta span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 5px;
}
.detail-meta strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.detail-note {
  font-size: 11px;
  line-height: 1.7;
  color: #869188;
  overflow-wrap: anywhere;
}
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.evidence-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.evidence-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.evidence-copy {
  padding: 12px;
  font-size: 10px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.evidence-copy strong {
  display: block;
  font-size: 12px;
  margin-bottom: 7px;
}
.evidence-copy small {
  display: block;
  color: var(--muted);
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 12px 0;
}
.detail-actions label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  max-width: 100%;
}
.detail-actions input {
  max-width: 260px;
}
.audit {
  font-size: 11px;
  line-height: 1.7;
}
.audit summary {
  cursor: pointer;
  color: var(--green);
  font-weight: 600;
}
.audit ol {
  list-style: none;
  padding: 0;
}
.audit li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.audit strong {
  display: block;
}
.audit small {
  color: var(--muted);
}
.form-dialog {
  width: min(650px, 94vw);
  max-height: 92dvh;
  border-radius: 18px;
  padding: 24px;
}
.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.form-grid .wide {
  grid-column: 1/-1;
}
.dialog-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 24px;
}
body.modal-open {
  overflow: hidden;
}
@media (max-width: 1199px) {
  .operation-row {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 16px;
  }
  .row-head {
    display: none;
  }
  .stage-strip {
    grid-column: 1/-1;
  }
  .row-open {
    grid-column: 1/-1;
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
  }
  .row-open span {
    display: inline;
  }
  .route-cell {
    text-align: right;
  }
  .route-cell .phase-badge {
    display: inline-block;
  }
  .timer-block > span {
    font-size: 10px;
  }
  .timer-block small {
    font-size: 10px;
  }
  .operation-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .operation-row {
    margin: 0;
  }
  .operation-list > .empty-state {
    grid-column: 1/-1;
  }
  .bar-trio {
    padding-inline: 3px;
  }
}
@media (max-width: 760px) {
  .app-header {
    height: 64px;
    padding: 0 16px;
  }
  .brand {
    font-size: 18px;
  }
  .brand small {
    font-size: 8px;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 23px;
  }
  .header-right {
    gap: 13px;
  }
  .header-right time {
    display: none;
  }
  main {
    padding: 22px 12px 12px;
  }
  .page-heading {
    margin-bottom: 18px;
    gap: 10px;
    align-items: start;
  }
  h1 {
    font-size: 23px;
    letter-spacing: -0.8px;
    max-width: 245px;
    line-height: 1.2;
  }
  .page-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1.3px;
  }
  .page-heading p:last-child {
    font-size: 10px;
  }
  .page-heading .primary-button {
    padding: 9px 11px;
    min-height: 36px;
    font-size: 11px;
    margin-top: 18px;
  }
  .filter-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 13px 10px;
    padding: 14px;
    border-radius: 13px;
  }
  .filter-panel label {
    font-size: 10px;
  }
  .date-filter {
    grid-column: 1;
  }
  .search-filter {
    grid-column: 2;
  }
  .agency-filter {
    grid-column: 1/-1;
  }
  .filter-panel #todayButton {
    position: absolute;
    right: 23px;
    bottom: 19px;
    padding: 6px 12px;
    min-height: 31px;
    font-size: 11px;
    background: #f4f9f4;
  }
  .agency-filter select {
    padding-right: 80px;
  }
  .scope-line {
    font-size: 10px;
    gap: 6px;
    line-height: 1.5;
  }
  .dataset-filter {
    font-size: 9px;
  }
  .dataset-filter select {
    font-size: 10px;
    max-width: 105px;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 15px;
  }
  .metric-card {
    padding: 13px 11px;
    gap: 2px 8px;
    border-radius: 12px;
  }
  .metric-card strong {
    font-size: 25px;
  }
  .metric-card > span:last-child {
    font-size: 10px;
  }
  .metric-symbol {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 19px;
  }
  .panel {
    padding: 17px 13px;
    border-radius: 14px;
    margin-bottom: 15px;
  }
  .section-heading {
    margin-bottom: 17px;
    gap: 6px;
  }
  h2 {
    font-size: 18px;
  }
  .section-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1.3px;
  }
  .small-note {
    font-size: 9px;
    line-height: 1.5;
  }
  .chart-legend {
    font-size: 10px;
    gap: 15px;
    margin-bottom: 22px;
  }
  .chart-area {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 7px;
  }
  .chart-axis {
    height: 150px;
    font-size: 9px;
  }
  .chart-plot {
    gap: 5px;
  }
  .chart-plot:before {
    height: 150px;
  }
  .bar-trio {
    height: 150px;
    padding-inline: 2px;
    gap: 2px;
  }
  .bar {
    width: 10px;
    max-width: 30%;
    border-radius: 3px 3px 0 0;
  }
  .bar b {
    font-size: 8px;
    top: -15px;
  }
  .bar-label {
    font-size: 9px;
    min-height: 42px;
    margin-top: 10px;
    line-height: 1.35;
  }
  .bar-label small {
    font-size: 7px;
  }
  .chart-navigation {
    display: flex;
  }
  .agency-figure figcaption {
    font-size: 9px;
    margin-top: 8px;
  }
  .operations-panel {
    padding-inline: 12px;
  }
  .operations-panel .section-heading h2 {
    font-size: 18px;
  }
  .section-heading .text-button {
    font-size: 10px;
    min-height: 30px;
  }
  .status-tabs {
    gap: 5px;
  }
  .status-tabs button {
    font-size: 10px;
    padding: 7px 8px;
    min-height: 34px;
  }
  .reference-note {
    font-size: 10px;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .operation-list {
    display: block;
  }
  .operation-row {
    margin-bottom: 12px;
    padding: 13px;
    gap: 12px 9px;
    border-radius: 12px;
  }
  .unit-name {
    font-size: 18px;
  }
  .unit-meta {
    font-size: 10px;
  }
  .route-code {
    font-size: 10px;
  }
  .route-cell strong {
    font-size: 10px;
  }
  .route-cell span {
    font-size: 9px;
  }
  .phase-badge {
    font-size: 9px;
    padding: 5px 7px;
  }
  .stage-strip {
    gap: 5px;
  }
  .stage {
    padding: 10px 8px;
  }
  .stage span {
    font-size: 8px;
  }
  .stage strong {
    font-size: 16px;
    letter-spacing: -0.2px;
  }
  .stage.pending strong {
    font-size: 11px;
  }
  .stage small {
    font-size: 9px;
  }
  .timer-block {
    padding: 4px 0;
  }
  .timer-block > strong {
    font-size: 20px;
  }
  .timer-block > span {
    font-size: 9px;
  }
  .timer-block small {
    font-size: 9px;
    line-height: 1.65;
  }
  .row-open {
    height: 38px;
    font-size: 11px;
  }
  .row-alert {
    font-size: 10px;
    padding: 10px;
  }
  .pagination {
    font-size: 9px;
    gap: 5px;
  }
  .pagination button {
    padding: 6px 8px;
    min-height: 34px;
    font-size: 10px;
  }
  .detail-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: 100%;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .detail-header {
    padding: 18px 15px 15px;
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .detail-header h2 {
    font-size: 22px;
  }
  .detail-header .eyebrow {
    font-size: 8px;
  }
  .detail-header p:last-child {
    font-size: 11px;
    line-height: 1.5;
  }
  .detail-body {
    padding: 18px 14px calc(22px + env(safe-area-inset-bottom));
  }
  .detail-body .stage strong {
    font-size: 19px;
  }
  .detail-body .stage span {
    font-size: 9px;
  }
  .detail-timers {
    gap: 9px;
  }
  .detail-timers .timer-block {
    padding: 12px;
  }
  .detail-timers .timer-block strong {
    font-size: 23px;
  }
  .detail-timers .timer-block small {
    font-size: 10px;
  }
  .evidence-grid {
    grid-template-columns: 1fr;
  }
  .detail-meta {
    gap: 16px 10px;
  }
  .detail-actions input,
  .detail-actions select {
    width: 100%;
    max-width: 100%;
  }
  .detail-actions label {
    width: 100%;
  }
  .detail-actions button {
    width: 100%;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-dialog {
    padding: 20px;
    max-height: 95dvh;
  }
  .page-heading #newOperation {
    flex-shrink: 0;
  }
  .message-item {
    font-size: 10px;
  }
}
@media (max-width: 359px) {
  h1 {
    font-size: 21px;
  }
  .bar-label {
    font-size: 8px;
  }
  .chart-legend {
    gap: 10px;
  }
  .metric-card {
    padding: 11px 9px;
  }
  .metric-card > span:last-child {
    font-size: 9px;
  }
  .metric-symbol {
    width: 26px;
  }
  .stage strong {
    font-size: 14px;
  }
  .timer-block > strong {
    font-size: 18px;
  }
  .scope-line {
    align-items: start;
  }
  .dataset-filter {
    flex-direction: column;
    align-items: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* RutaControl Command Center · tema inspirado en el tablero operativo */
:root {
  --ink: #e9f4ff;
  --muted: #7f96ad;
  --line: #173650;
  --canvas: #061525;
  --green: #04b886;
  --load: #12b9e7;
  --finish: #f2b63f;
  --exit: #17c793;
  --danger: #ff5d58;
  --radius: 14px;
  color-scheme: dark;
}
body {
  background: radial-gradient(circle at 68% 0, #0c2942 0, transparent 34%),
    #061525;
  color: var(--ink);
}
.app-header {
  height: 58px;
  background: #07192b;
  border-bottom: 1px solid #173650;
  padding: 0 24px 0 25px;
  box-shadow: 0 8px 30px #0002;
}
.brand {
  width: 178px;
  font-size: 20px;
  letter-spacing: -0.4px;
}
.brand-mark {
  width: 35px;
  height: 35px;
  border-color: #00bd8c;
  background: #0b2c3e;
  color: #76f4d0;
  box-shadow: 0 0 18px #00bd8c22;
}
.header-section {
  color: #aec0d1;
  font-size: 12px;
  border-left: 1px solid #1c3850;
  padding-left: 25px;
  margin-right: auto;
}
.header-right {
  color: #b7c8d8;
}
.live-label {
  color: #b9d4df;
}
.live-label i {
  background: #14d79c;
  box-shadow: 0 0 10px #14d79c;
}
.icon-button {
  border-color: #1b3d57;
  background: #0d2438;
  color: #c9d9e8;
}
.side-nav {
  position: fixed;
  left: 0;
  top: 58px;
  bottom: 0;
  width: 186px;
  background: #07182a;
  border-right: 1px solid #173650;
  padding: 16px 7px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 43px;
  padding: 0 18px;
  color: #95aabf;
  text-decoration: none;
  font-size: 12px;
  border-radius: 7px;
  border-left: 3px solid transparent;
}
.side-nav a span {
  width: 18px;
  text-align: center;
  color: #a6bacb;
  font-size: 16px;
}
.side-nav a:hover {
  background: #0c263d;
  color: #eaf5ff;
}
.side-nav a.active {
  background: linear-gradient(90deg, #0b6d68aa, #0b514f55);
  color: #efffff;
  border-left-color: #15e1ac;
  box-shadow: inset 0 0 0 1px #0a665d55;
}
.side-nav a.active span {
  color: #5ee7c6;
}
main {
  max-width: none;
  margin-left: 186px;
  padding: 22px 28px 24px;
}
.page-heading {
  margin-bottom: 16px;
}
.page-heading h1 {
  font-size: 29px;
}
.page-heading h1:after {
  content: "";
  display: block;
  width: 47px;
  height: 3px;
  border-radius: 3px;
  background: #1bd2a2;
  margin-top: 8px;
}
.page-heading p:last-child {
  color: #8199b0;
  margin-top: 10px;
}
.primary-button {
  background: linear-gradient(135deg, #00ae7b, #079f77);
  border-color: #16c394;
  box-shadow: 0 8px 28px #00a97822;
}
.primary-button:hover {
  background: #05c18c;
}
.secondary-button,
.action-button {
  background: #0a1f33;
  border-color: #1b405e;
  color: #bed0df;
}
.secondary-button:hover,
.action-button:hover {
  background: #0e2a42;
}
.text-button {
  color: #31ddb1;
}
.filter-panel {
  background: #091d31;
  border-color: #1a3d59;
  border-radius: 12px;
  padding: 14px 17px;
  box-shadow: inset 0 1px #ffffff05;
}
.filter-panel label,
.form-grid label {
  color: #93abc0;
}
.filter-panel input,
.filter-panel select,
input,
select,
textarea {
  background: #0a2238;
  border-color: #23445e;
  color: #e6f2fb;
}
.filter-panel input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #5f7890;
}
.scope-line {
  color: #7e94a8;
}
.dataset-filter select {
  background: #0a1f32;
}
.notice {
  background: #0b302d;
  border-color: #176a58;
  color: #8ce8cb;
}
.notice.error {
  background: #351c25;
  border-color: #873744;
  color: #ffb5af;
}
.metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.metric-card {
  background: linear-gradient(135deg, #0a2034, #0a1a2c);
  border-color: #1c4563;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px #0002;
}
.metric-card strong {
  font-size: 30px;
  color: #f5fbff;
}
.metric-card > span:last-child {
  color: #87a0b6;
}
.metric-symbol {
  background: #0c3b50;
  color: #1bc8ef;
  box-shadow: 0 0 22px #13bde629;
}
.total .metric-symbol {
  background: #0d3349;
  color: #5bd9f0;
}
.waiting .metric-symbol {
  background: #44341a;
  color: #ffc84f;
}
.departed .metric-symbol {
  background: #0b3b35;
  color: #31dda9;
}
.delayed {
  border-color: #753842;
}
.delayed .metric-symbol {
  background: #482128;
  color: #ff6d67;
  box-shadow: 0 0 22px #ff5d5825;
}
.metric-card:hover {
  border-color: #2c668c;
}
.metric-card.active {
  outline-color: #11c595;
}
.panel {
  background: linear-gradient(145deg, #091d31, #081827);
  border-color: #193b56;
  border-radius: 13px;
  box-shadow: 0 14px 40px #0002;
}
.eyebrow {
  color: #4f718d;
}
.small-note,
.reference-note {
  color: #7891a7;
}
.chart-legend {
  color: #93a9bd;
}
.chart-plot:before {
  border-color: #1b3951;
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    #19364b calc(25% - 1px),
    #19364b 25%
  );
}
.chart-axis {
  color: #7890a5;
}
.bar b {
  color: #c9d9e6;
}
.bar-label {
  color: #c7d6e2;
}
.bar-label small {
  color: #66839a;
}
.agency-bar.selected {
  background: #0d3141;
  outline-color: #1d8c79;
}
.agency-figure figcaption {
  color: #678399;
}
.agency-selection {
  background: #0b302f;
  border-color: #176558;
  color: #a7ead6;
}
.agency-selection button {
  color: #4fe0b8;
}
.count-pill {
  background: #0e3a3b;
  color: #56e2bc;
}
.status-tabs button {
  background: #0a2135;
  color: #7892a9;
  border-color: #173852;
}
.status-tabs button.active {
  background: #0a4b47;
  border-color: #117b6d;
  color: #65edc9;
}
.row-head {
  background: #0d263c;
  color: #7692aa;
}
.operation-row {
  border-color: #17344c;
}
.unit-meta,
.route-cell span,
.stage small {
  color: #6f879c;
}
.route-code {
  color: #35cfaa;
}
.dataset-tag {
  color: #c7a85e;
  background: #382f1c;
}
.stage {
  background: #0a2033;
}
.stage.done {
  background: #0b2d32;
}
.stage.current {
  background: #0b3042;
}
.stage span {
  color: #6e879d;
}
.stage.pending strong {
  color: #71879a;
}
.phase-badge {
  color: #49cef1;
  background: #0b3549;
}
.phase-badge.waiting {
  color: #f8c451;
  background: #3b301b;
}
.phase-badge.departed {
  color: #4be1b2;
  background: #0c3c35;
}
.phase-badge.registered {
  color: #99adbd;
  background: #172b3d;
}
.timer-block small,
.timer-block em {
  color: #708a9e;
}
.timer-block.overdue > strong {
  color: #ff736d;
}
.row-open {
  background: #0b273b;
  border-color: #1d4662;
  color: #4be0b6;
}
.row-alert {
  background: #3b2026;
  color: #ffaba3;
}
.row-alert.anomaly {
  background: #3d331d;
  color: #f7d272;
}
.system-panel {
  color: #9bb0c2;
}
.system-health span,
.message-item {
  background: #0a2336;
}
.pagination {
  color: #6f899f;
}
footer {
  color: #5c768d;
}
dialog {
  background: #091c2e;
  color: #e9f4ff;
  box-shadow: 0 20px 80px #000b;
}
dialog::backdrop {
  background: #020b14cc;
}
.detail-header {
  background: #091c2e;
  border-color: #1b3d55;
}
.close-button {
  background: #0c263b;
  border-color: #224760;
  color: #d5e4ef;
}
.detail-section {
  border-color: #19384f;
}
.detail-timers .timer-block {
  background: #0b2438;
  border-color: #1b3e58;
}
.detail-meta span,
.detail-note,
.audit small {
  color: #7891a6;
}
.evidence-card {
  border-color: #1a3c55;
}
.audit summary {
  color: #38d9ae;
}
.audit li {
  border-color: #17354c;
}
@media (max-width: 1199px) {
  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .operation-row {
    background: #091d30;
    border-color: #193c56;
  }
}
@media (max-width: 760px) {
  .app-header {
    height: 60px;
    background: #07192b;
  }
  .header-section {
    display: none;
  }
  .side-nav {
    display: none;
  }
  main {
    margin-left: 0;
    padding: 18px 12px 12px;
  }
  .brand {
    width: auto;
  }
  .page-heading h1 {
    font-size: 25px;
  }
  .page-heading .primary-button {
    background: #05ad80;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .metric-card.total {
    grid-column: 1/-1;
  }
  .panel,
  .filter-panel {
    background: #091d30;
  }
  .operation-row {
    background: linear-gradient(150deg, #0a2237, #081928);
    box-shadow: 0 8px 24px #0002;
  }
  .form-dialog {
    background: #091c2e;
  }
}

.login-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at 50% 10%, #114568 0, transparent 42%),
    #061525;
}
.login-card {
  width: min(390px, 100%);
  padding: 34px 30px;
  background: #091d31;
  border: 1px solid #1a4563;
  border-radius: 18px;
  box-shadow: 0 25px 70px #0008;
}
.login-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #0b3b3a;
  color: #67f0c9;
  border: 1px solid #148d7b;
  font-size: 31px;
  margin-bottom: 20px;
}
.login-card h1 {
  margin-bottom: 12px;
}
.login-card > p:not(.eyebrow) {
  font-size: 12px;
  line-height: 1.6;
  color: #91a8bb;
  margin: 0 0 24px;
}
.login-card form {
  display: grid;
  gap: 15px;
}
.login-card label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  font-weight: 650;
  color: #9cb3c4;
}
.login-card button {
  width: 100%;
  margin-top: 5px;
}
.login-error {
  margin: 0;
  color: #ffaaa5;
  font-size: 12px;
  line-height: 1.5;
}

/* Formulario de usuarios de Telegram: campos siempre visibles y legibles. */
.inline-form {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(130px, 0.75fr) auto;
  gap: 12px;
  align-items: end;
  margin: 14px 0 18px;
}
.inline-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #9cb3c4;
  font-size: 11px;
  font-weight: 650;
}
.inline-form input,
.inline-form select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
}
.inline-form .primary-button {
  min-height: 42px;
  white-space: nowrap;
}
.form-feedback {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 11px;
  color: #8eb2c9;
}
.form-feedback.error { color: #ffaaa5; }
.form-feedback.success { color: #72ebc4; }
@media (max-width: 900px) {
  .inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-form .primary-button { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 520px) {
  .inline-form { grid-template-columns: 1fr; }
  .inline-form .primary-button { grid-column: auto; }
}