:root{
  --mop-red:#E10600;
  --header-gray:#7a7a7a;
  --row-alt:#f1f1f1;
  --text:#000;
  --white:#fff;
}

html,body{
  margin:0;
  width:1080px;
  height:200px;
  overflow:hidden;
  font-family: Arial, Helvetica, sans-serif;
  background:#fff;
  color:var(--text);
}

.wrap{
  width:1080px;
  height:200px;
}

/* Linha 1 (Topo) */
.topbar{
  height:40px;
  background:var(--mop-red);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  box-sizing:border-box;
}

.title{
  font-size:16pt;
  font-weight:800;
  white-space:nowrap;
}

.time{
  font-size:16pt;
  font-weight:800;
  letter-spacing:0.5px;
  min-width:90px;
  text-align:right;
  font-variant-numeric: tabular-nums;
}
.mins{
  font-size:14pt;
  font-weight:900;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  display:inline-block;
}

/* Piscar apenas o ":" sem mexer na largura */
#colon{
  display:inline-block;
  width:0.4em;
  text-align:center;
  animation: blink 2s steps(1) infinite;
}

@keyframes blink{
  50% { opacity: 0; }
}

/* Linha 2 (Legenda) */
.legend{
  height:20px;
  background:var(--header-gray);
  color:var(--white);
  display:grid;
  grid-template-columns: 130px 200px 110px 1fr 140px 140px 140px;
  align-items:center;
  padding:0 24px;
  box-sizing:border-box;
  font-size:12pt;
  font-weight:700;
}

/* Zona das 3 linhas */
.rows{
  height:138px;            /* 200 - 40 - 20 = 140; usamos 138 para margem de segurança */
  display:flex;
  flex-direction:column;
}

.row{
  height:46px;             /* 46 * 3 = 138 */
  display:grid;
  grid-template-columns: 130px 200px 110px 1fr 140px 140px 140px;
  align-items:center;
  padding:0 24px;
  box-sizing:border-box;
  font-size:12pt;
  font-weight:600;
  background:#fff;
  line-height:1.1;
}

.row:nth-child(even){
  background:var(--row-alt);
}

/* Centrar TODAS as colunas */
.legend > div,
.row > div{
  text-align:center;
}

/* Operador com logo (na mesma coluna) */
.operador{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
}

.operador img{
  height:18px;
  width:auto;
  display:block;
}

/* Texto e números */
.mins{
  font-size:14pt;
  font-weight:900;
  font-variant-numeric: tabular-nums;
}

.muted{
  font-weight:600;
  font-size:13pt;
}

/* Observações: container */
.obs{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  white-space:nowrap;
}

/* Marquee (scroll horizontal automático) */
.obs.marquee{
  justify-content:flex-start;      /* para o scroll ocupar a célula */
}

.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;
}

/* Animação: move track para a esquerda */
@keyframes marquee{
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}