#top-banner img {
  width: 100%;
}

/* PASOS COMO ADQUIRIR ================================ */

#como-adquirir {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--gris-claro);
}

#como-adquirir p {
  text-align: center;
  margin: 0;
  padding-top: 32px;
  padding-left: 16px;
  padding-right: 16px;
  color: var(--gris-texto);
  font-size: larger;
}

.pasos {
  display: flex;
  justify-content: center;
}

.paso img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .pasos {
    flex-wrap: wrap;
  }

  .paso {
    width: 50%;
  }
}

/* TITULOS ===================================== */

.titulo-paso-boletera-box {
  width: 100%;
  padding-left: 32px;
  display: flex;
  padding: 32px;
  justify-content: space-between;
}

.titulo-paso-boletera {
  display: flex;
  align-items: center;
  background-color: #7242e1;
  color: #fff;
  width: fit-content;
  padding: 16px;
  gap: 16px;
  border-radius: 10px;
}

.titulo-paso-numero {
  margin: 0;
  font-size: 50px;
  font-weight: 900;
  line-height: 40px;
}

.titulo-paso-texto {
  margin: 0;
  font-size: 24px;
}

.contador {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
}

.contador p {
  margin: 0;
}
.contador img {
  width: 40px;
  height: 40px;
}

.tiempo {
  color: var(--rosa-boletos);
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .titulo-paso-boletera-box {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ASIENTOS =================================== */

.asientos-desk {
  /* display: grid; */
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  width: 100%;
}

.indicadores-laterales p {
  margin: 0;
  height: 28px;
}

.asientos {
  position: relative;
}

.asientos .row button,
.asientos .d-flex button,
.colores button {
  background-color: #90ee90;
  border: solid 1px #000;
  border-radius: 5px;
  height: 28px;
}

.colores {
  padding: 32px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.colores button {
  opacity: 100;
}

.vacio {
  visibility: hidden;
}

.ocupado {
  background-color: #ab4646 !important;
  color: #fff;
}

.seleccionado {
  background-color: #7242e1 !important;
  color: #fff;
}

.asientos-top-row {
  display: grid;
  grid-template-columns: auto 1fr 2fr 3fr 2fr 1fr auto;
  grid-template-rows: 3fr 2fr;
  gap: 16px;
  width: 100%;
}

.asientos-zoom-container {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.asientos-down-row {
  grid-column: 1 / -1;
  padding: 0 64px;
  grid-template-columns: auto 1fr 2fr 3fr 2fr 1fr auto;
  display: grid;
  gap: 16px;
}

#asientosMapa,
#asientosMapa2 {
  transform-origin: top left;
  transition: transform 0.2s ease-out;
}

/* ASIENTOS MOBILE ==================================== */

.indicador-zona,
.indicador-zona-baja {
  display: none;
  font-size: 100px;
  font-weight: bolder;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.indicador-zona-baja {
  top: 20px;
}

.boton-deshabilitado {
  pointer-events: none; /* No reciben clicks */
  opacity: 0.5; /* Opcional para mostrar que están deshabilitados */
}

.zona-y-close {
  display: none;
}
@media (max-width: 768px) {
  .indicador-zona,
  .indicador-zona-baja {
    display: block;
  }

  .zona-y-close {
    justify-content: space-between;
    padding: 32px;
  }

  .zona-y-close p {
    color: var(--gris-texto);
    font-size: 32px;
    font-weight: bolder;
    margin: 0;
  }

  .zona-y-close button {
    background-color: #fff;
    border: solid var(--rosa-boletos);
    border-radius: 5px;
    width: 50px;
    height: 50px;
    color: var(--rosa-boletos);
    font-size: 32px;
    font-weight: 900;
  }
}

/* SIN ASIENTOS ===================================== */

.seleccionador-boletos {
  padding: 0 32px;
  display: flex;
  justify-content: center;
}

.card-boletos {
  width: 50%;
  max-width: 600px;
  padding: 16px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.card-boletos p {
  margin: 0;
  font-size: 32px;
}

.boton-mas-menos {
  font-size: 30px;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  font-weight: bolder;
  line-height: 50px;
  background-color: var(--gris-claro);
}

@media (max-width: 768px) {
  .card-boletos {
    width: 100%;
  }
}



/* REALIZA TU PAGO ================================ */

.realiza-tu-pago-box {
  padding: 0px 32px 32px 32px;
  display: flex;
  flex-direction: column;
}

.realiza-tu-pago-box p {
  color: var(--gris-texto);
  margin: 0;
}

#lugares {
  font-weight: bold;
  color: var(--rosa-boletos);
}

.bold {
  font-weight: bold;
}

.bolder {
  font-weight: bolder;
}

.purple {
  color: #7242e1 !important;
}

.small-fs {
  font-size: small;
}

#total {
  font-weight: bold;
  color: #7242e1;
}

.cards-pago {
  display: flex;
  gap: 16px;
}

.card-pago {
  width: 50%;
  max-width: 600px;
  padding: 16px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-pago p {
  margin: 0;
}

.card-pago img {
  width: 100%;
  max-width: 70px;
  padding-bottom: 16px;
}

.concepto {
  color: var(--rosa-boletos) !important;
}

@media (max-width: 768px) {
  .cards-pago {
    flex-direction: column;
  }
  .card-pago {
    width: 100%;
  }
}

/* REGISTRA TUS DATOS ======================== */

#formCompra {
  color: var(--gris-texto);
}

.lugares {
  color: var(--rosa-boletos);
  font-weight: bolder;
}

.registra-tus-datos-box {
  padding: 0px 32px 32px 32px;
}

.form-inputs {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

#alfanumerico {
  background-color: #f2b2b2;
  color: var(--rosa-boletos);
  font-weight: bolder;
}

#btnSubir {
  grid-column: span 2;
  display: flex;
  align-items: center;
}

.form-inputs input,
#btnSubir {
  color: var(--gris-texto);
  border: var(--gris-texto) solid 1px;
  border-radius: 5px;
  background-color: #fff;
  min-height: 50px;
  padding: 8px;
}

.warning {
  color: var(--rosa-boletos);
  font-size: small;
  margin: 0;
}

.terminar-form {
  border-radius: 10px;
  border: none;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  padding: 0;
  pointer-events: all !important; /* No reciben clicks */
  opacity: 1 !important;
}

.navbar-toggler,
.descarga-boletos-btn {
  pointer-events: all !important; /* No reciben clicks */
  opacity: 1 !important;
}

.terminar-form p {
  margin: 0;
  text-align: start;
  background-color: #7242e1;
  /* height: 60px; */

  color: #fff;
}

.terminar-form img {
  height: 60px;
}

.inner-btn {
  display: flex;
  align-items: center;
  border-radius: 10px;
}

.back {
  background-color: #7242e1;
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

.btn-box {
  display: flex;
  justify-content: end;
  width: 100%;
  padding-top: 32px;
}

@media (max-width: 768px) {
  .form-inputs {
    grid-template-columns: 1fr;
  }

  #btnSubir {
    grid-column: auto;
  }
}

.input-archivo {
  opacity: 0;
  position: absolute;
  left: -9999px;
  pointer-events: none;
}

/* POP UP ===================================== */

#pop-up {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 100%;
  max-width: 500px;
}

#pop-up img {
  width: 100%;
}

#pop-up-texto {
  padding: 16px;
}

#pop-up-texto p,
#pop-up-texto a {
  color: #062276;
  text-decoration: none;
}

.bold {
  font-weight: bolder;
}

#pop-up-arrow-check {
  padding: 0 16px;
  display: flex;
  justify-content: end;
}

#pop-up-arrow-check button {
  background-color: #fff;
  border: none;
}

#pop-up-arrow-check img {
  max-width: 120px;
}

#pop-up-descarga {
  position: absolute;
  top: 100%;
  width: 100vw;
  height: 100vh;
  background-color: #FFFFFF80;
  display: flex;
  justify-content: end;
  animation-duration: 0.2s;
}

#obtencion-de-datos {
  background-color: #fff;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.25);
  padding: 16px;
  border-radius: 10px;
  max-width: 500px;
  height: fit-content;
  display: flex;
  align-items: center;
  padding: 32px;
  gap: 8px;
}
#obtencion-de-datos img {
  max-width: 60px;
}

.proximamente {
  color: var(--rosa-boletos);
  font-weight: 900;
  margin: 0;
  text-align: center;
  font-size: larger;
}

#form-obtencion-boletos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#form-obtencion-boletos input,
#form-obtencion-boletos button,
#form-obtencion-boletos select {
  width: 100%;
  border: #000 solid 1px;
  background-color: #fff;
  border-radius: 5px;
  padding: 8px;
}