/* pelicula_seleccionada.css */
/* @import "compass/css3"; */

body {
  /* negro 1 oscuro */
  background-color: rgb(34, 34, 34);
}

/* -------------- */

/* -------------- */

/* peliculaBloque */
#peliculaBloque h1 {
  font-size: 60pt;
}

#peliculaBloque .container {
  padding-left: 0px;
  padding-right: 0px;
}

#peliculaBloque #bloqueDatos,
#peliculaBloque #bloqueTrailer {
  margin-bottom: 5%;
  margin-top: 5%;
  padding: 20px;
}

#peliculaBloque #bloqueSinopsis {
  margin-top: 0%;
  padding: 20px;
}

#peliculaBloque #bloqueSinopsis {
  /* amarillo 1*/
  background-color: rgb(227, 192, 49);
}

#peliculaBloque #bloqueSinopsis h1,
#bloqueTrailer h1 {
  font-size: 30pt;
}

#peliculaBloque #bloqueDatos {
  /* amarillo 1*/
  background-color: rgb(227, 192, 49);
}

#peliculaBloque #bloqueDatos .nombreDato {
  font-weight: bold;
  /* negro 2 medio */
  color: rgb(26, 26, 26);
}

#peliculaBloque #bloqueDatos .variosNombres {
  font-style: italic;
  padding-left: 0px;
  margin-left: 10px;

  /* negro 2 medio */
  color: rgb(26, 26, 26);
}

#peliculaBloque #bloqueDatos h1 {
  font-size: 70pt;
}

#peliculaBloque h1,
#peliculaBloque #bloqueDatos h1,
#peliculaBloque #bloqueSinopsis h1,
#bloqueTrailer h1 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: aliceblue;
}

#peliculaBloque #poster_pelicula img {
  width: 100%;
  /* height: 100%; */
}
/* peliculaBloque end */

/* Bottones de modales y toast de valorar pelicula */
.custom-confirm-button-bien {
  background-color: white;
  color: rgb(26, 26, 26);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;

  padding: auto;
}
.swal2-html-container {
  padding: 0px;
}

.custom-confirm-button-error {
  /* negro 2 medio */
  background-color: rgb(26, 26, 26);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
/* Bottones de modales y toast de valorar pelicula end */

/* Boton de puntuar */
/* Estilo inicial del botón */
#openRatingModal {
  font-size: 2em;

  /* negro 2 medio */
  color: rgb(26, 26, 26);

  /* amarillo 3 gold estrella*/
  background-color: rgb(218, 185, 0);

  box-shadow: 0 0 0 0 rgba(255, 229, 31, 0.7);
  animation: pulse 4s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.1);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(233, 255, 66, 0.307);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(198, 212, 90, 0);
  }
}

/* Estilo hover del botón */
#openRatingModal:hover {
  /* amarillo 4 gold oscuro*/
  background-color: gold;

  /* negro 2 medio */
  color: white;
  animation: pulse 1s infinite;
}

/* animación "pulse" */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse-button {
  border: #ffffff 2px solid;
  background-color: rgb(96, 96, 96);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;

  margin-top: 15px;
  margin-bottom: 10px;
}

.pulse-button-activo {
  /* amarillo 1*/
  background-color: rgb(227, 192, 49);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;

  margin-top: 15px;
  margin-bottom: 10px;
}

/* Efecto de palpitación al hacer hover */
.pulse-button-activo:hover {
  animation: pulse 1s infinite;
}

/* animación "pulse" */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* Boton de puntuar end */

/* trailer */
#peliculaBloque .video-container {
  position: relative;
  width: 100%; /* Ancho adaptable */
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
  height: 0;
  overflow: hidden;
}

#peliculaBloque .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ancho adaptable */
  height: 100%; /* Altura basada en el contenedor */
}