.pedidos__contenedor{
   
    margin: 3rem;
    background-color: var(--blancoA);
    border-radius: 35px;
    padding: 1rem;
}
.pedidos__titulo{
    text-align: center;
    text-transform: uppercase;
    font-size: 2.5vh;
    font-weight: 600;
    padding: .3rem;
    /* margin-bottom: .3rem; */
    /* display: flex;
    flex-direction: row; */
}
.pedidos__tabla__contenedor{
    display: flex;
}
.pedidos__tabla{
   
    padding: 1rem;
    width: 100%;
    margin: .5rem;
}
 .pedidos__tabla__encabezado{
    background-color: var(--mostazaClaro);
}
/*pedidos__tabla__tbody tr:nth-child(1){
    background-color: var(--secondary-color);
}
.pedidos__tabla__tbody tr:nth-child(2){
    background-color: var(--blancoA);
} */
.pedido__boton{
    background-color: var(--mostazaPrimario);
    padding: .3rem;
    border-radius: 25px;
    font-size: 12px;
    color: var(--blancoA);
    width: 50%;
    font-weight: 500;
}
.pedido__boton:hover{
    background-color: var(--mostazaSecundario);
}
.cita__boton {
  background-color: var(--mostazaPrimario);
  padding: 0.3rem;
  border-radius: 25px;
  font-size: 12px;
  color: var(--negro);
  /* width: 50%; */
  font-weight: 400;
}
.cita__boton:hover{
  background-color: var(--mostazaSecundario);
}
.pedido__detalle__contenedor{
    margin: 3rem;
    background-color: var(--blancoA);
    border-radius: 35px;
    padding: 1rem;
}
.contenBtn {
  display: flex; /* o display: inline-flex; según corresponda */
  justify-content: flex-end;
}
.btnAgregarProducto{
  background-color: var(--success-color);
  padding: .5rem;
  border-radius: 25px;
  font-size: 12px;
  color: var(--blancoA);
  margin-top: 8px;
  font-weight: 500;
  font-size: 1.8vh;
}
.btnCancelarPedido{
    background-color: var(--rojoPrincipal);
    color: var(--blancoA);
    padding: .5rem;
    border-radius: 15px;
    justify-content: space-between;
    
}
.btnActualizarPedido{
  background-color: var(--success-color);
  color: var(--blancoA);
  padding: .5rem;
  border-radius: 15px;
  justify-content: space-between;
  max-width: 100%;
  width: 95%;
  margin-left: 1.8rem;
  margin-right: 1.8rem;
  margin-top: .5rem;
  
}
.btnActivar{
  background-color: var(--success-color);
  padding: .3rem;
  border-radius: 25px;
  font-size: 12px;
  color: var(--blancoA);
  margin-top: 8px;
  font-weight: 500;
  width: 50%;
}
.btnDesactivar{
  background-color: var(--warning-color);
  padding: .3rem;
  border-radius: 25px;
  font-size: 12px;
  color: var(--blancoA);
  margin-top: 8px;
  font-weight: 500;
  width: 50%;
}
.pedido__imagen{
    display: flex;
    justify-content: center;
   
    /* margin-bottom: 3rem; */
}
.pedido__imgTs {
  display: flex;
  width: 70vw;
  height: 60vh;
  object-fit: contain;
}

.pedido__mensaje{
    text-align: center;
    font-size: 2.5vh;color: var();
}
@keyframes moverBarco {
    0% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(-5px); }
  }
  
  .pedido__imagen-animacion {
    animation: moverBarco 5s ease-in-out infinite;
    width: 30vw;
    height: 30vh;
    object-fit: contain;
    border-radius: 25px;
  }
  /* .barra__carga{
    /* padding: 1rem; */
    /* margin-top: 3.3rem; */
  /* } */ 
  .progress {
    position: relative;
  }
  
  .progress-value {
    position: absolute;
    top: -20px; }
  #progress-bar {
    width: 0%;
    height: 20px;
    /* background-color:var(--mostazaPrimario); */
    background-image: linear-gradient(120deg,#aed5ff 0%,#0071ea 50%,#00065b 100%);
    transition: width 0.5s ease;
    /* animation: loading 2s infinite; */
    animation: fillProgress 1s ease forwards;
    padding: .5rem;
    border-radius: 25px;
    margin: 1rem;
  }
  @keyframes fillProgress {
    0% {
      width: 0%;
    }
    100% {
      width: var(--progress-width, 0%);
    }
  }
  
  
/* @keyframes moverBarco {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  
  .barco-imagen {
    animation: moverBarco 10s linear infinite;
  } */

  /* @media screen and (min-width: 768px) {
    .pedidos__tabla{
   
     
      width: 150px;
      
  }
} */
/* Estilos para dispositivos móviles */
@media (max-width: 768px) {

  .pedido__imagen-animacion {
    animation: moverBarco 5s ease-in-out infinite;
    width: 50vw;
    height: 40vh;
    object-fit: contain;
    border-radius: 25px;
  }
 
}