:root {
  --color-negro-profundo: #1a1a1a; /* Un negro más suave, ideal para fondos */
  --color-burdeos: #7b1f24; /* Un rojo oscuro y elegante para elementos destacados */
  --color-gris-acero: #a5a5a5; /* Gris medio para textos y detalles menores */
  --color-azul-medianoche: #2c3e50; /* Azul oscuro, perfecto para barras de navegación o pies de página */
  --color-dorado-oscuro: #b68d40; /* Dorado suave, ideal para íconos o botones que requieran atención */
  --color-blanco-humo: #f5f5f5; /* Un blanco roto para textos, mejora la legibilidad sin ser demasiado brillante */
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

nav {
  background-color: var(--color-negro-profundo);
  color: white;
  padding: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
}

nav * a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 3em 0;
}

/* index.html */

.movies {
  margin-top: 3em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
}

.movie {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid #333;
  background-color: #333;
  border-radius: 8px;
  color: white;
  padding: 0em 2em;
  padding-top: 15em;
  padding-bottom: 3em;
  width: clamp(20em, 100vw, 30em);
  gap: 2em;
  transition: transform 0.5s ease;

  background-image: linear-gradient(
      rgba(0, 0, 0, 0.1),
      /* Transición a casi transparente hacia el centro */ rgba(0, 0, 0, 0.805)
        /* Negro con 50% de opacidad en la parte superior */
    ),
    url("../img/walle.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  > img {
    width: 8em;
    border-radius: 8px;
  }
}

.movie-info {
  display: flex;
  flex-direction: column;
  gap: 0.1em;

  > h3 {
    margin: 0;
    font-size: 2em;
    font-weight: 800;
  }

  > p {
    color: var(--color-gris-acero);
  }

  > a {
    width: fit-content;
    border-radius: 8px;
    background-color: var(--color-burdeos);
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  }
}

.movie-info > a:hover {
  background-color: var(--color-blanco-humo);
  color: var(--color-burdeos);
}

/* Horarios.html */

.movie--header {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
  justify-items: end;
  gap: 4em;
  width: 70%;

  > img {
    width: 20em;
    flex: 5;
    align-content: center;
  }
}

.movie--header--text {
  justify-self: start;

}

.movie--header--text > span {
  margin:1em 0;
}

.movie--header--title {
  font-size: 2em;
  margin: 0;
}

.movie--header--duration {
  margin-top: 1em;
  color: var(--color-azul-medianoche);
}

.spots {
  margin-top: 5em;
  display: flex;
  justify-content: center;
  gap: 1em;
}

.spot, .info-spot {
  color: var(--color-azul-medianoche);
  display: block;
  border-radius: 10px;
  border: 1px solid var(--color-azul-medianoche);
  font-weight: 800;
  padding: 1em 3em 3em 1em;
}

.spot:hover {
  background-color: var(--color-azul-medianoche);
  color: var(--color-blanco-humo);
}

/* Asientos */

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.seats {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1em;
  margin-top: 2em;
  width: 70%;
  overflow: scroll;
  height: fit-content;
}

.seat {
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seat > .reserved {
  cursor: not-allowed;
}

.seat:hover {
  > .free {
    border-bottom: 2px solid var(--color-azul-medianoche);
  }
}

.seat > .material-symbols-outlined {
  font-size: 5em;
}

.free {
  color: var(--color-azul-medianoche);
}

.reserved {
  color: var(--color-burdeos);
}
.selected{
  color: var(--color-dorado-oscuro);
  border-bottom: 2px solid var(--color-dorado-oscuro);
}

.btn{
  background-color: var(--color-azul-medianoche);
  color: var(--color-blanco-humo);
  border: none;
  border-radius: 10px;
  padding: 1em 2em;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.btn:hover{
  background-color: var(--color-dorado-oscuro);
}

.btn:disabled{
  background-color: var(--color-gris-acero);
  cursor: not-allowed;
}

.seats--info{
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.select--button{
  font-size: 0.7em;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#seats-number{
  font-size: 1.5em;
  color: var(--color-azul-medianoche);
  width: 3em;
  text-align: center;
}

/* Compra.html */

.success{
  color: green;
  
  display: flex;
  justify-content: center;

  > span{
    font-size: 4em;
  }
}

/* Responsive */

@media screen and (max-width: 768px) {
  nav {
    flex-direction: column;
  }

  nav > ul {
    margin-top: 1em;
  }

  main {
    padding: 1em;
  }

  .movies {
    flex-direction: column;
  }

  .movie {
    width: 100%;
    padding: 1em;
    margin-bottom: 1em;
  }

  .movie-info {
    gap: 0.5em;
  }

  .movie--header {
    grid-template-columns: 1fr;
    justify-items: center;
    justify-content: center;
    gap: 1em;
  }

  .movie--header--text {
    text-align: center;
  }
}