:root{
  --mop-red:#E10600;

  /* NOVA barra azul */
  --header-blue:#1E2E8C;

  /* Linha Verde (Metro) */
  --linha-verde:#009640;

  --row-alt:#f2f2f7;
  --text-blue:#1E2E8C;
  --white:#fff;
  --line:#dcdce3;
}

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

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

/* ============================= */
/* TOP BAR */
/* ============================= */

.topbar{
  height:40px;
  background:var(--mop-red);
  color:var(--white);
  display:grid;

  /* EXACTAMENTE a mesma grelha das linhas */
  grid-template-columns: 140px 260px 1fr 170px 220px;

  align-items:center;
  padding:0 22px;
  box-sizing:border-box;
}

.title{
  grid-column:1 / 4;
  font-size:15pt;
  font-weight:900;
  letter-spacing:0.2px;
}

.time{
  grid-column:4;            /* mesma coluna da Hora Prevista */
  text-align:center;
  font-size:15pt;
  font-weight:900;
  font-variant-numeric: tabular-nums;
}

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

/* ============================= */
/* CABEÇALHO COLUNAS */
/* ============================= */

.legend{
  height:20px;
  background:var(--header-blue);
  color:#ffffff;
  display:grid;
  grid-template-columns: 140px 260px 1fr 170px 220px;
  align-items:center;
  padding:0 22px;
  box-sizing:border-box;
  font-size:11.5pt;
  font-weight:800;
}

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

.legend > div:first-child{
  text-align:right;
  padding-right:10px;
}

/* ============================= */
/* LINHAS */
/* ============================= */

.rows{
  height:140px;
  display:flex;
  flex-direction:column;
}

.row{
  height:46.6667px;
  display:grid;
  grid-template-columns: 140px 260px 1fr 170px 220px;
  align-items:center;
  padding:0 22px;
  box-sizing:border-box;
  font-size:12pt;
  font-weight:700;
  border-top:1px solid var(--line);
}

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

/* alinhamentos */
.row > div{
  text-align:center;
}

.row > div:first-child{
  text-align:center;
  padding-right:10px;
}

/* Linha/Carreira → azul da barra */
.row > div:nth-child(2){
  color:var(--header-blue);
  font-weight:900;
}

/* Destino → verde linha */
.row > div:nth-child(3){
  color:var(--linha-verde);
  font-weight:900;
}

/* Hora prevista */
.mins{
  font-size:13pt;
  font-weight:900;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

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