/* Contêiner geral das posições dos vagões já está dentro de .high-tapete-container */

/* Estilo base dos vagões */
.vagao {
  position: absolute;
  border-radius: 6px;
  border: 2px solid black;
  background: white;
  opacity: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  z-index: 5;
  cursor: grab;
}

/* Estilo das rodas */
.roda {
  position: absolute;
  width: 20%;
  height: 20%;
  background-color: black;
  border-radius: 50%;
}



/* RODAS dos vagões de baixo (mais próximas do centro visual) */
.vagao-baixo .roda-1 {
  top: -15%;
  left: 12%;
}

.vagao-baixo .roda-2 {
  top: -15%;
  right: 12%;
}

.vagao-baixo .roda-3 {
  bottom: -15%;
  left: 12%;
}

.vagao-baixo .roda-4 {
  bottom: -15%;
  right: 12%;
}

/* RODAS dos vagões de cima (espelhado ou ajustado diferente) */
.vagao-cima .roda-1 {
  top: 12%;
  left: -12%;
}

.vagao-cima .roda-2 {
  top: 12%;
  right: -12%;
}

.vagao-cima .roda-3 {
  bottom: 12%;
  left: -12%;
}

.vagao-cima .roda-4 {
  bottom: 12%;
  right: -12%;
}

/* Cada grupo de cores (área onde o vagão pode parar) */
.area-vagao {
  position: absolute;
  width: 23%;
  height: 11%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2%;
  gap: 3%;
}

/* Cada cor dentro da área */
.area-vagao .cor {
  width: 50%;
  height: 180%;
  border-radius: 6px;
  border: 2px solid black;
  /* ⬅️ borda preta */
  background-color: rgba(255, 255, 255, 0.1);
  /* opcional: para realce */
}

/* Cores */
.area-vagao .amarela {
  background-color: yellow;
}

.area-vagao .cinza {
  background-color: gray;
}

.area-vagao .verde {
  background-color: green;
}

.area-vagao .azul {
  background-color: blue;
}

/* Posições iniciais (ajuste as porcentagens conforme o tapete) */
#area1 {
  bottom: 5.6%;
  left: -0.3%;
}

#area2 {
  bottom: 5.7%;
  right: -0.3%;
  flex-direction: row-reverse;
}

#area3 {
  top: 32%;
  left: -5.5%;
  transform: rotate(-90deg);
}

#area4 {
  top: 18.6%;
  right: -5.9%;
  transform: rotate(90deg);
}



/* Estilo de cores será definido dinamicamente via JS */

/* Posições absolutas dos vagões no tapete */
#pos1 {
  width: 4.2%;
  height: 11%;
  top: 3%;
  left: 2.1%;
}

#pos2 {
  width: 4.2%;
  height: 11%;
  top: 46.5%;
  right: 2.2%;
}

#pos3 {
  width: 5.8%;
  height: 9%;
  bottom: 3.5%;
  left: 21%;
}

#pos4 {
  width: 5.8%;
  height: 9%;
  bottom: 3.5%;
  right: 21%;
}

.botoes-expresso {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 20px auto;
  flex-wrap: wrap;
}

.botoes-expresso button {
  padding: 10px 20px;
  background: linear-gradient(to right, #05a857, #02c77d);
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
}

.botoes-expresso button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}