/* Painel de parada: tela cheia, legível à distância, tema escuro por padrão. */
:root {
  --rows: 8;
  --accent: #2f80ed;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --unit: min(1vw, 1.78vh);           /* escala única para paisagem e retrato */
  --gap: calc(var(--unit) * 1.4);
}
.theme-dark {
  --bg: #0b0f17;
  --panel: #131a26;
  --panel-alt: #182131;
  --line: #243045;
  --text: #f4f7fb;
  --muted: #9aa8bd;
  --good: #3ddc84;
  --sched: #c6d0de;
  --warn: #ffb020;
  --crit: #ff4d4f;
  --info: #4ea1ff;
}
.theme-light {
  --bg: #eef2f7;
  --panel: #ffffff;
  --panel-alt: #f6f8fb;
  --line: #d5dce6;
  --text: #0d1726;
  --muted: #536179;
  --good: #0a8a43;
  --sched: #2a3a52;
  --warn: #b26a00;
  --crit: #c62828;
  --info: #1565c0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
body.show-cursor { cursor: default; }
[hidden] { display: none !important; }

.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--unit) * 1.6) calc(var(--unit) * 2);
  padding-top: max(calc(var(--unit) * 1.6), env(safe-area-inset-top));
  gap: var(--gap);
}

/* ---------- topo ---------- */
.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(var(--unit) * 2.4);
  padding-bottom: calc(var(--unit) * .8);
  border-bottom: calc(var(--unit) * 0.3) solid var(--accent);
}
.logo { max-height: calc(var(--unit) * 5.5); max-width: calc(var(--unit) * 18); object-fit: contain; display: block; }
.stop { min-width: 0; }
.kicker {
  color: var(--muted);
  font-size: calc(var(--unit) * 1.5);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stop-name {
  margin: 0;
  font-size: calc(var(--unit) * 3.4);
  line-height: 1.08;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clock-box { text-align: right; }
.clock {
  font-size: calc(var(--unit) * 4);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.date { color: var(--muted); font-size: calc(var(--unit) * 1.5); margin-top: calc(var(--unit) * .4); }

/* ---------- alertas ---------- */
.alerts {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(var(--unit) * 1.6);
  padding: calc(var(--unit) * .7) calc(var(--unit) * 1.4);
  border-radius: calc(var(--unit) * 1);
  background: color-mix(in srgb, var(--sev) 18%, var(--panel));
  border-left: calc(var(--unit) * .8) solid var(--sev);
  --sev: var(--info);
  font-size: calc(var(--unit) * 1.8);
  animation: fade .5s ease;
}
.alerts.sev-WARNING { --sev: var(--warn); }
.alerts.sev-CRITICAL { --sev: var(--crit); }
.alert-badge {
  background: var(--sev);
  color: #fff;
  font-weight: 800;
  padding: calc(var(--unit) * .4) calc(var(--unit) * 1.1);
  border-radius: calc(var(--unit) * .6);
  text-transform: uppercase;
  font-size: calc(var(--unit) * 1.5);
  white-space: nowrap;
}
.theme-dark .alerts.sev-WARNING .alert-badge { color: #1a1200; }
.alert-text { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-height: 1.25; -webkit-box-orient: vertical; }
.alert-text strong { margin-right: .5em; }
.alert-count { color: var(--muted); font-size: calc(var(--unit) * 1.5); font-variant-numeric: tabular-nums; }

/* ---------- tabela ---------- */
.cols, .row {
  display: grid;
  grid-template-columns: calc(var(--unit) * 13) minmax(0, 1fr) calc(var(--unit) * 19) calc(var(--unit) * 22);
  align-items: center;
  gap: calc(var(--unit) * 1.8);
  padding: 0 calc(var(--unit) * 1.6);
}
.cols {
  color: var(--muted);
  font-size: calc(var(--unit) * 1.3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cols span:nth-child(3), .cols span:nth-child(4) { text-align: right; }

.board {
  --rowh: 60px;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: calc(var(--unit) * .7);
}
.board.page-enter { animation: fade .45s ease; }
.row {
  background: var(--panel);
  border-radius: calc(var(--unit) * 1);
  min-height: 0;
  overflow: hidden;
}
.row:nth-child(even) { background: var(--panel-alt); }

.line {
  justify-self: start;
  max-width: 100%;
  min-width: calc(var(--unit) * 8);
  padding: calc(var(--rowh) * .06) calc(var(--unit) * 1.2);
  border-radius: calc(var(--unit) * .8);
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: min(calc(var(--rowh) * .56), calc(var(--unit) * 4.6));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.dest {
  font-size: min(calc(var(--rowh) * .46), calc(var(--unit) * 3.8));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dest .type { color: var(--muted); font-weight: 600; font-size: .62em; margin-left: .5em; }

.next { text-align: right; white-space: nowrap; }
.next .value {
  font-size: min(calc(var(--rowh) * .7), calc(var(--unit) * 5.8));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.next .unit { font-size: min(calc(var(--rowh) * .3), calc(var(--unit) * 2.4)); font-weight: 700; margin-left: .25em; color: var(--muted); }
.eta-rt .value { color: var(--good); }
.eta-sch .value { color: var(--sched); }
.next .arriving { font-size: min(calc(var(--rowh) * .44), calc(var(--unit) * 3.6)); font-weight: 900; color: var(--good); animation: blink 1.4s ease-in-out infinite; }

.after {
  text-align: right;
  white-space: nowrap;
  font-size: min(calc(var(--rowh) * .36), calc(var(--unit) * 2.8));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.after .eta { margin-left: calc(var(--unit) * 1.4); }
.after .eta-rt { color: var(--good); }
.after .eta-sch { color: var(--sched); }

.rt-dot {
  display: inline-block;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--good);
  margin-right: .45em;
  vertical-align: middle;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent);
  animation: pulse 2s infinite;
}
.sch-icon { color: var(--sched); margin-right: calc(var(--unit) * .5); font-size: 1.1em; vertical-align: -0.05em; }
.next .rt-dot { font-size: min(calc(var(--rowh) * .4), calc(var(--unit) * 3)); }
.legend .rt-dot { font-size: 1em; }
.wheel { color: var(--info); margin-left: .3em; font-size: min(calc(var(--rowh) * .3), calc(var(--unit) * 2.2)); }

/* ---------- mensagens (sem serviço, erro, carregando) ---------- */
.message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--unit) * 1.4);
  padding: calc(var(--unit) * 4);
}
.message-icon { font-size: calc(var(--unit) * 9); line-height: 1; opacity: .85; }
.message-title { font-size: calc(var(--unit) * 4); font-weight: 800; }
.message-text { font-size: calc(var(--unit) * 2.4); color: var(--muted); max-width: 70ch; }
.spinner {
  width: calc(var(--unit) * 8);
  height: calc(var(--unit) * 8);
  border-radius: 50%;
  border: calc(var(--unit) * .8) solid var(--line);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}

/* ---------- rodapé ---------- */
.bottom {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: calc(var(--unit) * 2.4);
  color: var(--muted);
  font-size: calc(var(--unit) * 1.5);
  padding-top: calc(var(--unit) * .7);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-text { min-width: 0; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-item { margin-left: calc(var(--unit) * 1.8); white-space: nowrap; }
.status { display: flex; align-items: center; gap: calc(var(--unit) * .9); white-space: nowrap; font-variant-numeric: tabular-nums; }
.page { margin-right: calc(var(--unit) * 1.2); font-weight: 700; color: var(--text); }
.status-dot { width: calc(var(--unit) * 1.1); height: calc(var(--unit) * 1.1); border-radius: 50%; background: var(--good); }
.status-dot.stale { background: var(--warn); }
.status-dot.offline { background: var(--crit); }

/* ---------- retrato (totens) ---------- */
@media (orientation: portrait) {
  :root { --unit: min(1.6vw, 1vh); }
  .top { grid-template-columns: auto 1fr; }
  .clock-box { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  .cols, .row { grid-template-columns: calc(var(--unit) * 11) minmax(0, 1fr) calc(var(--unit) * 15); }
  .cols span:nth-child(4), .row .after { display: none; }
  .line { font-size: min(calc(var(--rowh) * .46), calc(var(--unit) * 3.2)); }
  .dest {
    font-size: min(calc(var(--rowh) * .36), calc(var(--unit) * 2.7));
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.12;
  }
  .next .value { font-size: min(calc(var(--rowh) * .56), calc(var(--unit) * 4.2)); }
  .next .arriving { font-size: min(calc(var(--rowh) * .36), calc(var(--unit) * 2.8)); }
  .bottom { grid-template-columns: 1fr auto; }
  .legend { display: none; }
}

@keyframes fade { from { opacity: 0; transform: translateY(calc(var(--unit) * .6)); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
  70% { box-shadow: 0 0 0 .35em transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}