/* ------------------------------------------------------------------ */
/* LOGIN */
/* ------------------------------------------------------------------ */

.main {
  background-color: #586277;
  rotate: 50%;
}

.card-login {
  width: 390px;
  height: auto;
  box-shadow: 10px 10px 64px 0px rgba(208, 208, 214, 0.75);
  -webkit-box-shadow: 10px 10px 64px 0px rgba(226, 226, 226, 0.75);
  -moz-box-shadow: 10px 10px 64px 0px rgba(241, 241, 243, 0.75);
}

.login-form {
  padding: 25px;
}

.card_header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-body svg {
  color: #7878bd;
  margin-right: 5px;
}

.form_heading {
  padding-bottom: 20px;
  font-size: 21px;
  color: #7878bd;
}

.form-group {
  padding-bottom: 10px;
}

.form-control {
  border-radius: 5px;
  background-color: #e9e9f7;
  padding: 5px;
  width: 100%;
  color: #7a7ab3;
  border: 1px solid #dadaf7;
}

.form-control:focus-visible {
  outline: 1px solid #aeaed6;
}

.form-control::placeholder {
  color: #bcbcdf;
}

label .control-label {
  color: #b2bac8;
  font-size: 14px;
  display: block;
  padding-bottom: 4px;
}

.button_login {
  background-color: #7878bd;
  margin-top: 10px;
  font-size: 14px;
  padding: 7px 12px;
  height: auto;
  font-weight: 500;
  color: white;
}

.button_login:hover {
  background-color: #5f5f9c;
}

.card-lote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* CARD CARRITO */

.master-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-carrito {
  /* Estilos para la card */
  width: 100%; /* Ancho máximo para evitar que se hagan muy grandes en pantallas grandes */
  background: #ffffff;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.titulo {
  width: 100%;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #efeff3;
  font-weight: 700;
  font-size: 11px;
  color: #63656b;
}

/* cart */
.carrito {
  border-radius: 19px 19px 7px 7px;
}

.carrito .products {
  display: flex;
  flex-direction: column; /* Cambiar a columna para apilar los elementos verticalmente */
  align-items: center; /* Aumentar el espacio interno */
}

.carrito .products .product {
  display: flex; /* Cambiar a display flex para alinear los elementos */
  flex-direction: column;
  justify-content: space-between; /* Alinear los elementos en los extremos */
  align-items: center;
  margin: 5px; /* Centrar verticalmente los elementos */
  padding: 5px;
}

.carrito .products .product span {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin-bottom: 8px;
  display: block;
}

.carrito .products .product p {
  font-size: 11px;
  font-weight: 600;
  color: #7a7c81;
}

.carrito .quantity .cantidad_producto {
  height: 30px;
  display: grid;
  align-self: flex-end;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
}
.card-carrito .small {
  font-size: 15px;
  margin: 0 0 auto auto;
}

.card-carrito .small sup {
  font-size: px;
}

/* coupons */
.coupons {
  border-radius: 7px;
}

.coupons form {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  padding: 10px;
}

.input_field {
  width: auto;
  height: 36px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.coupons form button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, #4480ff 0%, #115dfc 50%, #0550ed 100%);
  box-shadow: 0px 0.5px 0.5px #efefef, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
}

/* Checkout */
.checkout {
  border-radius: 9px 9px 19px 19px;
}

.checkout .detalles {
  display: grid;
  grid-template-columns: 3fr 1fr;
  padding: 10px;
  gap: 5px;
}

.checkout .detalles span {
  font-size: 13px;
  font-weight: 600;
}

.checkout .detalles span:nth-child(odd) {
  font-size: 11px;
  font-weight: 700;
  color: #707175;
  margin: auto auto auto 0;
}

.checkout .detalles span:nth-child(even) {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin: auto 0 auto auto;
}

.checkout .checkout--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
  background-color: #efeff3;
}

.price {
  position: relative;
  font-size: 22px;
  color: #2b2b2f;
  font-weight: 900;
}

.price sup {
  font-size: 13px;
}

.price sub {
  width: fit-content;
  position: absolute;
  font-size: 11px;
  color: #5f5d6b;
  bottom: 5px;
  display: inline-block;
}

.checkout .checkout-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 36px;
  background: linear-gradient(180deg, #4480ff 0%, #115dfc 50%, #0550ed 100%);
  box-shadow: 0px 0.5px 0.5px #efefef, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
@media (min-width: 768px) {
  .card-carrito {
    width: calc(
      50% - 20px
    ); /* Ancho máximo para las tarjetas en pantallas medianas */
  }
}

@media (min-width: 1200px) {
  .card-carrito {
    width: 70%; /* Ancho máximo para las tarjetas en pantallas grandes */
  }
}

.custom-file-upload {
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  position: relative;
}

.cuadrado {
  width: 60px;
  height: 60px;
  border: 2px dashed #000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
  position: relative;
}

.linea {
  background-color: #000;
  position: absolute;
}

.horizontal {
  width: 20px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vertical {
  width: 2px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mas {
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input-file {
  display: none;
}

ul,
li {
  list-style: none;
}

/* MODAL ARCHIVOS */
/* Estilos para el elemento de la lista */
.list-group {
  width: 100%;
  margin: auto;
}
.archivo-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: #fff;
}

/* Estilos para los detalles del archivo (nombre y marca de verificación) */
.archivo-details {
  display: flex;
  align-items: center;
  width: 70%; /* Ocupa el 70% del ancho del cuadro */
}

.archivo-name {
  margin-right: 10px;
  font-weight: bold;
}

/* Estilos para el botón de eliminación */
.eliminar-archivo {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #d9534f;
  font-size: 20px;
}

.eliminar-archivo:hover {
  transform: translate(-1, 1);
}

#cardBody {
  height: 0;
  overflow: hidden;
  transition: height 1.5s ease-in;
}

.list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-group-item .nombre-archivo {
  flex-grow: 1;
}