.main {
  width: 100%;
  margin-top: var(--Top);
  padding: var(--Padding);
}
.main h1 {
  color: var(--ColorSecundario);
  font-weight: 600;
}
.main .contenedor-ventas {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin-top: var(--Margin);
}
.main .contenedor-ventas div p {
  color: var(--ColorSecundario);
}

.main .contenedor-ventas div button ,
 .main .contenedor-ventas div input{
  padding:var(--Padding) calc(var(--Padding) / 1.5);
  outline: none;
  border: none;
  cursor: pointer;
  width: 50%;
  background-color: var(--ColorSecundario);
}

.main .contenedor-ventas div button.editarS{
  border-radius: 10px 10px 10px 10px !important;
}
.main .contenedor-ventas .opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  padding:calc(var(--Padding) / 2);
}

.main .contenedor-ventas div input {
  background-color: var(--ColorDanger);
  color: var(--ColorSecundario);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.main .contenedor-ventas div button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.main .contenedor-ventas .header-idventa ,
.main .contenedor-ventas .header-usuario ,
.main .contenedor-ventas .header-forma_pago ,
.main .contenedor-ventas .header-fecha ,
.main .contenedor-ventas .header-id_prd ,
.main .contenedor-ventas .header-cantidad,
.main .contenedor-ventas .header-precio,
.main .contenedor-ventas .header-status,
.main .contenedor-ventas .header-opcion {
  border: var(--border) solid var(--ColorSecundario);
  color: var(--ColorSecundario);
  font-weight: 600;
  /*
  font-size: calc(var(--SizeDescripcion) * 1.3);frmbuscar
  */
  padding: var(--Padding) calc(var(--Padding) / 2);
}

.main .contenedor-ventas .header-cb div{
  overflow: scroll;
}

.main .frmbuscar {
  display: flex;
  flex-direction:row;
  justify-content: end;
}

.main .frmbuscar input {
  padding: calc(var(--Padding) / 1.2);
  outline: none;
  border: none;
  border-radius: var(--BorderRadius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  
}

.main .frmbuscar label {
  color: var(--ColorSecundario);
  font-weight: 600;
}
.main .frmbuscar button {
  padding: calc(var(--Padding) / 1.1) var(--Padding);
  outline: none;
  border: none;
  border-radius: var(--BorderRadius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--ColorSecundario);
  background-color: var(--ColorPrincipal);
  border: var(--border) solid var(--ColorSecundario);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
}
.main .frmbuscar button:hover {
  color: var(--ColorPrincipal);
  background-color: var(--ColorSecundario);
}

.main .contenedor-ventas div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .contenedor-ventas div p {
  text-align: center;
  
}

.contenedor-modal {
  position: fixed;
  background-color: rgba(0 ,0,0,0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: opacity .3s;
  display: none;
}

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.contenedor-modal .modal {
  width: 40%;
  padding: 40px 30px 40px 30px;
  background-color: var(--ColorPrincipal);
  display: flex;
  flex-direction: column;
  border-radius: var(--BorderRadius);
  animation: translate 1s .3s forwards;
  transform: translateY(-1000px);
}

@keyframes translate {
  to {
    transform: translateY(0);
  }
}
.contenedor-modal .modal h1 {
  color: var(--ColorSecundario);
  margin-bottom: 15px;
}
.contenedor-modal .modal form {
  display: flex;
  flex-direction: column;
}
.contenedor-modal .modal form label {
  color: var(--ColorSecundario);
  font-weight: 500;
  margin-bottom: 5px;
}
.contenedor-modal .modal form input ,
 .contenedor-modal .modal form select{
  padding:calc(var(--Padding) / 1.5);
  outline: none;
  border: none;
  border-radius: var(--BorderRadius);
  margin-bottom: 10px;
}

.contenedor-modal .modal form .contenedor-button {
  margin-top: var(--Margin);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}
.contenedor-modal .modal form .contenedor-button button {
  width: 20%;
  padding: var(--Padding);
  outline: none;
  border: var(--border) solid var(--ColorSecundario);
  color: var(--ColorSecundario);
  background-color: var(--ColorPrincipal);
  border-radius: var(--BorderRadius);
  cursor: pointer;
  transition: all .3s;

}
.contenedor-modal .modal form .contenedor-button button:hover {
  color: var(--ColorPrincipal);
  background-color: var(--ColorSecundario);
}