/* Font para el nombre de la página*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Satisfy&display=swap');

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

:root {
  --color-aventura: #d9a876; /* Color verde oscuro para Aventura */
  --color-romance: #f2dbe7; /* Color rosa para Romance */
  --color-misterio: #444146; /* Color morado oscuro para Misterio */
  --color-naturaleza: #6977f1; /* Color verde para Naturaleza */
} 

html {
  font-size: 2.5vw;
  min-font-size: 18px;
  /* Tamaño de letra base para dispositivos móviles */
  max-font-size: 36px;
  /* Tamaño de letra base para Desktop */
}

.contenedor {
  display: grid;
  grid-template: 20vh 1fr 8vh / 10vw 1fr;
  grid-template-areas: "header header"
    "left contenido"
    "footer footer";
  grid-gap: 1vw;
  height: 100vh;
}

/* Estilos para el modo Día */
html.modoDia {
  background-color: #fbfbfb;
  color: #050000;
}

/* Estilos para el modo Noche */
html.modoNoche {
  background-color: #121212;
  color: #fbfbfb;
}




.link-contacto {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  /* margin-left: 14vw;
  position: relative;
  top: 40px; */
}

#logo {
  display: flex;
  width: 95vw;
  align-items: center;
  justify-content: center;

}


#logoGenero {
  width: 6.5vw;
  margin-left: 2vw;
  border-radius: 50%;
}

#logo div {
  font-family: 'Satisfy', cursive;
  font-size: 300%;
  margin-left: 2vw;
}

/* Botón modo Día Noche */
#modoDiaNoche {
  background-image: url("../css/iconos/dia.png");
  background-size: cover;
  border: none;
  background-repeat: no-repeat;
  background-color: transparent;
  width: 3vw;
  height: 3vw;
  margin-right: 2vw;
  cursor: pointer;
}

/* ============================== Boton Cerrar Sesion ==============================*/

.left button {
  border: none;
  background: #6246ea;
  color: rgb(201, 201, 201);
  padding: 2vh 0vw;
  border-radius: 5px;
  font-size: 45%;
  margin: 0.5vw 0.5vw;
  width: 80%;
  height: auto;
  text-align: center;
 }
 .left button:hover {
  background: #0732f12d;
  color: black;
 }

.left {
  grid-area: left;
  background-color: rgba(168, 134, 254, 0.324);
  margin-left: 1vw;
  border-radius: 1vw;
  padding: 1vw;
  display: flex;
  flex-direction: column;
  justify-content:start;
  align-items: center;
  /* margin-top:6.5vw; */
  height: auto;
}

.left div {
 text-align: center;
 font-weight: bold;
}

.left button {
  /* text-align: center; */
  border: none;
 }


a {
  text-decoration: none;
  color: inherit;
}

.menuop {
  /* display: inline-block; */
  background: #6246ea;
  color: rgb(201, 201, 201);
  padding: 2vh 0vw;
  border-radius: 5px;
  font-size: 45%;
  margin: 0.5vw 0.5vw;
  width: 80%;
  height: auto;
  text-align: center;
}

.menuop:hover {
  background: #0732f12d;
  color: black;
}

.contenido {
  grid-area: contenido;
  background-color: rgba(168, 134, 254, 0.324);
  border-radius: 1vw;
  /* margin-bottom: 5vw; */
  padding-bottom: 5vw;
}
/* ============================== HEADER ==============================*/
.header {
  grid-area: header;
  border-radius: 15vw 0 15vw 0vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(168, 134, 254, 0.324);
  /* padding: 6vw; */
}
.header img {
  width: 10%; 
  height: auto;
  border-radius: 50%; 

}


/* ============================== FOOTER  ==============================*/

.footer {
  position: fixed;
  grid-area: footer;
  border-radius: 1vw 1vw 0 0;
  background-color: #8686e7;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3px;
}

.footer a {
  font-size: 150%;
}

/* ============================== INDEX ==============================*/
.about-us {
  background-color:rgba(101, 157, 214, 0.605);
  border-radius: 15vw 0vw 15vw 0vw;
  margin-bottom: 8vw;
}
.about-us h1 {
  position: relative;
  display: flex;
  padding-top: 5vw;

}
.about-us p {
  position: relative;
  display: flex;
  padding-top: 3vw;
  padding-bottom: 6vw;
  font-size: 90%;
}
.carrusel-contenedor {
  background-color:rgba(101, 157, 214, 0.605);
  border-radius: 15vw 15vw 15vw 15vw;
  position: relative;
  display: flex;
  padding-top: 6vw;
  padding-bottom: 6vw;
}
.contact {
  background-color:rgba(101, 157, 214, 0.605);
  border-radius: 15vw 0vw 15vw 0vw;
  margin-top: 8vw;
}
.contact h1 {
  position: relative;
  display: flex;
  padding-top: 4vw;
}
.contact p {
  position: relative;
  display: flex;
  padding-top: 3vw;
  padding-bottom: 6vw;
  font-size:90%;
}

/* ============================== REGISTRO ==============================*/
.wrapper-reg {
  text-align: left;
  padding: 3vw;
  font-size: 70%;
  margin-bottom: 5vw;
}
.wrapper-reg  p {
  font-size: 80%;
  width: 95%;
}
.container-registro {
  background-color: #d0d0d0;
  box-shadow: 0 0 10px rgba(10, 12, 14, 0.747);
  border-radius: 5px;
  width: 24vw;
  /* height: 25vw; */
  margin-left: 25vw;
}
#registroBotones {
  display:flex;
  justify-content: space-evenly;
}

.container-registro button {
  background-color: rgba(4, 4, 243, 0.742);
  padding: 1vw;
  color:#fbfbfb;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  /* margin-left: 2vw; */
}
.container-registro label {
  /* font-size: 20px; */
  font-weight: bold;
  margin-left: 2vw;
}
.container-registro input {
  font-size: 100%;
  font-weight: bold;
  margin-left: 2vw;
  border-radius: 5px;
  padding-top: 3px;
  width: 85%;
}

.login p {
  font-size: 14px;
  color: #db2777;
  margin-left: 9vw;
}

p {
  font-size: 60%;
  margin: 1vw auto;
  text-align: justify;
  width: 90%;
  line-height: 1.5;
}
h3 {
  text-align: center;
}
/* ============================== Inicio ==============================*/
.wrapper-log {
  text-align: left;
  padding: 3vw;
  font-size: 80%;
}
.wrapper-log  p {
  font-size: 80%;
  width: 95%;
}
.container-login {
  background-color: #d0d0d0;
  box-shadow: 0 0 10px rgba(10, 12, 14, 0.747);
  border-radius: 5px;
  width: 24vw;
  /* height: 22vw; */
  margin-left: 25vw;
}
.form-group{
  padding: 1vw;
}
.btn-login button, .registroBotones button {
  /* margin-top: 2vw; */
  margin-left: 8vw;
  background-color: rgba(4, 4, 243, 0.742);
  padding: 1vw;
  color:#fbfbfb;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 60%;
}
.container-login label {
  /* font-size: 20px; */
  font-weight: bold;
  margin-left: 2vw;
}
.container-login input {
  font-size: 80%;
  font-weight: bold;
  margin-left: 2vw;
  border-radius: 5px;
  padding-top: 3px;
  width: 85%;
}
.register p {
  /* font-size: 14px; */
  color: #db2777;
  /* margin-left: 12vw; */
  text-align: center;
}
/* ============================== PAGINA SELECCION DE LIBRO ============================== */
.contenido-libro {
  margin-top: 4vw;
  display: flex;
  justify-content: center;
}
.imagen-libro {
  margin-right: 2vw;
}
.info-libro {
  font-size: 80%;
  margin-left:5vw;
}
.busqueda a {
  font-size: 70%;
  background-color: rgba(4, 4, 243, 0.742);
  padding: 10px;
  color: white;;
  margin-left: 2vw;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
}
/* ============================== PANEL DE USUARIO ==============================*/
.wrapper-panel {
  text-align: left;
  padding: 3vw;
  font-size: 80%;
}
.container-data {
  background-color: whitesmoke;
  box-shadow: 0 0 10px rgba(10, 12, 14, 0.747);
  border-radius: 5px;
  width: 40vw;
  /* height: 25vw; */
  margin-left: 25vw;
  margin-bottom: 5vw;
}

.container-data button, .container-prefe button {
  background-color: rgba(4, 4, 243, 0.742);
  padding: 1vw;
  color:#fbfbfb;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 60%;
}
.btn-datosPersonales{
  display: flex;
  justify-content: center;
  padding-bottom: 1vw;
}

.container-data label {
  /* font-size: 20px; */
  font-weight: bold;
  margin-left: 1vw;
}
.container-data input {
  font-size: 80%;
  font-weight: bold;
  /* margin-left: 2vw; */
  border-radius: 5px;
  padding-top: 3px;
  /* width: 85%; */
}

.container-data input[type="radio"] {
  margin: 0 0.5vw 0 2vw;
}
/* ============================== Preferencias de lectura ==============================*/
/* Establece colores de fondo para cada género */
#generoAventura+label {
  background-color: var(--color-aventura);
}

#generoMisterio+label {
  background-color: var(--color-misterio);
}

#generoNaturaleza+label {
  background-color: var(--color-naturaleza);
}

#generoRomance+label {
  background-color: var(--color-romance);
}

.container-prefe {
  background-color: whitesmoke;
  box-shadow: 0 0 10px rgba(10, 12, 14, 0.747);
  border-radius: 5px;
  width: 40vw;
  margin-left: 25vw;
  padding: 1vw 0;
}

.form-genero {
  display: flex;
  align-items: center;
  padding: 1vw 1vw;
}

.form-genero label {
  display: flex;
  align-items: center;
  padding: 0.1vw;
  flex: 1;
  justify-content: space-around;
  border-radius: 10px;
  margin-top: 1vwgit ;
}

input[type="checkbox"] {
  width: 4vw; 
  height: 4vh; 
  margin-right: 1vw;
}
#BotonPreferenciasLectura{
  font-size: 35%;
}
/* ============================== CARRUSEL ==============================*/

.carrusel-contenedor {
  width: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
}
.carrusel-imagenes {
  display: flex;
  animation: scroll 10s linear infinite; 
}

.carrusel-imagenes img {
  width: 100%;
  height: 15vw;
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  50% {
      transform: translateX(-35%);
  }
  100% {
    transform: translateX(1%);
} 
}

/* ============================== RATING ESTRELLAS ==============================*/
.rating {
  display: inline-block;
  /* margin-left: 23vw; */
  /* margin-top: 3vw; */
}
.rating > span {
  display: inline-block;
  font-size: 36px;
  cursor: pointer;
  color: black; /* Color de estrella no seleccionada */
}

.rating > span.selected {
  color: orange; /* Color de estrella seleccionada */
}
.rating h2 {
  font-size: 70%;
}
.rating p {
  font-size: 40%;
}

.rating i {
  margin-bottom: 1vw;
}

/* ============================== RESPONSIVE ==============================*/
@media (max-width: 1000px) {
  .contenedor {
    grid-template: 17vh 1fr 5vh / 10vw 1fr;
    grid-template-areas: "header header"
    "left contenido"
    "footer footer";
    
    #logo img {
    width: 12%;
  }
  }
}
@media (max-width: 780px) {
  .contenedor {
    grid-template: 14vh 1fr 4vh / 10vw 1fr;
    grid-template-areas: "header header"
    "left contenido"
    "footer footer";
  }
 /*  #logo img {
    width: 7vw;
    margin-right: 2vw;
  } */
/*   #logo div {
    font-size: 200%;
  } */
  #modoDiaNoche {
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
  }
/*   .menuop {
    font-size: 90%;
  } */

  .footer a {
    font-size: 200%;
  }
  .footer h6 {
    font-size: 70%;
  }
  .form-genero {
    padding: 0.5vw 1vw; 
  }
}

@media (max-width: 500px) {
  .contenedor {
    grid-template: 9vh 1fr 4vh / 10vw 1fr;
    grid-template-areas: "header header"
    "left contenido"
    "footer footer";
  }
/*   #logo div {
    font-size: 250%;
  } */
/*   #logo img {
    margin-right: 2.5vw;
  } */
  #modoDiaNoche {
    width: 5vw;
    height: 5vw;
    margin-right: 2.5vw;
  }
/*   .menuop {
    font-size: 100%;
  } */
  .footer a {
    font-size: 250%;
  }
  .footer h6 {
    font-size: 80%;
  }
}

/* IFRAME LOCATION*/
.mapouter {
  position: relative;
  height: 460px;
  width: 720px;
  background: #fff;
}
.gmap_canvas {
  overflow: hidden;
  height: 460px;
  width: 720px
}

.gmap_canvas iframe {
  position: relative;
  /* z-index: 2 */
}
.contenido-map {
  display: flex;
  justify-content: space-around;
}
.descripcion{
  padding: 0 1vw;
}

/* Estilo para la tabla de los favoritos */
.tabla-fav {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.tabla-fav th, .tabla-fav td {
  border: 5px solid rgb(212, 209, 209);
  padding: 8px;
  text-align: left;
}

.tabla-fav th {
  background-color: #f2f2f2;
}

.tabla-fav img {
  max-width: 100px; /* Ajusta el tamaño máximo de la imagen */
  height: auto;
  display: block; /* Evita problemas con los márgenes */
  margin: 0 auto; /* Centra la imagen en su celda */
}

.tabla-fav button {
  cursor: pointer;
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
}

/* Estilos del boton favorito */

.Favs button {
  /* background-color: #4285f4; */
  color: black;
  border: none;
  padding: 15px 20px; 
  border-radius: 50%; 
  font-size: 18px; 
  cursor: pointer;
}

/* Estilos para pasar el mouse sobre el btn */
.Favs button:hover {
  background-color: #357ae8; /* Cambia el color de fondo al pasar el mouse */
}