:root{
  --mop-red:#E10600;
  --header-gray:#7a7a7a;
  --row-alt:#f3f3f3;
  --text:#0b0b0c;
  --white:#fff;
  --muted:#666;

  /* alturas */
  --h-top: 120px;
  --h-legend: 58px;
  --h-footer: 50px;

  /* 1920 - (120+58+50)=1692 => 25 linhas = 67.68px -> arredonda para 67px e sobra ~17px (ok) */
  --h-row: 67px;

  /* colunas (total ≈ 1080 - paddings) */
  --c-transport: 150px;
  --c-operator: 250px;
  --c-line: 165px;
  --c-dest: 1fr;
  --c-time: 140px;
  --c-next: 155px;
  --c-obs: 220px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  width:1080px;
  height:1920px;
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  color:var(--text);
}

.wrap{
  width:1080px;
  height:1920px;
  display:flex;
  flex-direction:column;
}

/* HEADER */
.topbar{
  height:var(--h-top);
  background:var(--mop-red);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 34px;
}

.title{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:34px;
  font-weight:900;
  letter-spacing:0.3px;
  white-space:nowrap;
  line-height:1;
}
.title .sub{
  font-size:18px;
  font-weight:700;
  opacity:.92;
  letter-spacing:.2px;
}

.time{
  font-size:36px;
  font-weight:900;
  font-variant-numeric: tabular-nums;
  min-width: 150px;
  text-align:right;
}

#colon{
  display:inline-block;
  width:0.45em;
  text-align:center;
  animation: blink 2s steps(1) infinite;
}
@keyframes blink{ 50% { opacity: 0; } }

/* LEGEND */
.legend{
  height:var(--h-legend);
  background:var(--header-gray);
  color:var(--white);
  display:grid;
  grid-template-columns: var(--c-transport) var(--c-operator) var(--c-line) var(--c-dest) var(--c-time) var(--c-next) var(--c-obs);
  align-items:center;
  padding:0 26px;
  font-size:22px;
  font-weight:800;
}

.legend > div{ text-align:center; }

/* ROWS */
.rows{
  height: calc(1920px - var(--h-top) - var(--h-legend) - var(--h-footer));
  display:flex;
  flex-direction:column;
  padding:0;
}

.row{
  height:var(--h-row);
  display:grid;
  grid-template-columns: var(--c-transport) var(--c-operator) var(--c-line) var(--c-dest) var(--c-time) var(--c-next) var(--c-obs);
  align-items:center;
  padding:0 26px;
  font-size:24px;
  font-weight:750;
  line-height:1.05;
}

.row:nth-child(even){ background:var(--row-alt); }
.row > div{ text-align:center; }

/* Operador com logo */
.operador{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.operador img{
  height:26px;
  width:auto;
  display:block;
}
.operador span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 190px;
}

/* destino mais legível */
.ds{
  text-align:left !important;
  padding-left:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Linha/cais */
.ln{
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Hora */
.hr{
  font-variant-numeric: tabular-nums;
}

/* Próxima */
.mins{
  font-size:28px;
  font-weight:950;
  font-variant-numeric: tabular-nums;
  display:inline-block;
  min-width: 110px;
}

/* OBS */
.obs{
  overflow:hidden;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}

.obs.marquee{ justify-content:flex-start; }

.obs .marquee-track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  will-change: transform;
  animation: marquee 10s linear infinite;
}
.obs .marquee-gap{
  display:inline-block;
  padding:0 18px;
}
@keyframes marquee{
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* FOOTER */
.footer{
  height:var(--h-footer);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  font-size:18px;
  color:#444;
  border-top: 1px solid rgba(0,0,0,.08);
}
.foot-right{ font-variant-numeric: tabular-nums; }