/* styles.css */

.novedades-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 20px 0;
    margin-bottom: 40px;
}

.novedades-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.novedades-card:hover {
    transform: translateY(-5px);
}

.bestseller-img {
    width: 160px;
    height: 240px;
    /* Altura fija para uniformidad */
    object-fit: cover;
    /* Para que no se deformen al forzar el tamaño */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: block;
}

.canal-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: block;
    border: 2px solid #eee;
}

/* Estilo para el menú de navegación */
#menu {
    background-color: #232f3e;
    color: #ffffff;
    padding: 10px;
}

#menu a {
    color: #ffffff;
    text-decoration: none;
    padding: 2.5px;
    display: inline-block;
}

/* Estilo para el contenedor principal del chat y los resultados */
.chat-container {
    max-width: 1250px;
    margin: 50px auto;
    padding: 20px;
}

/* Estilo para el formulario de entrada */
.input-container {
    display: flex;
    margin-bottom: 100px;
}

.sentence-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #ff9900;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    margin-left: 10px;
    /* Agrega margen izquierdo de 10px (o el valor que prefieras) */
}

/* Estilo para la lista de libros recomendados */
.book-description {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Estilo para la lista de libros recomendados */
.one_book-description {
    padding: 100px 20px;
    display: flex;
    justify-content: center;
}


/* Estilo para cada libro */
.book {
    padding: 10px;
    margin: 0 0 20px 0;
    width: calc(50% - 20px);
    /* Ocupa el 50% del ancho del contenedor con márgenes */
    box-sizing: border-box;
    /* Asegura que los márgenes estén incluidos en el ancho */
    display: flex;
    /* Aplica flexbox a los elementos con clase .book */
    flex-direction: row;
    /* Alinea el contenido en una fila horizontal */
    align-items: flex-start;
    /* Alinea los elementos en la parte superior verticalmente */
    text-align: left;
    /* Alinea el texto a la izquierda */
}

/* Estilo para la columna de la imagen */
.book-image {
    max-width: 50%;
    /* Ancho máximo de la imagen */
    margin-right: 20px;
    /* Agrega un margen derecho entre la imagen y el texto */
}

/* Estilo para la columna de información (título y descripción) */
.book-info {
    flex: 1;
    /* Ocupa el espacio restante en el contenedor */
    display: flex;
    /* Aplica flexbox a la columna de información */
    flex-direction: column;
    /* Alinea la información en una columna vertical */
}

/* Estilo para el título del libro */
h2 {
    font-size: 18px;
    margin: 0 0 10px 0;
    /* Elimina el margen superior y agrega margen inferior entre el título y la descripción */
}

.author {
    color: #838383;
    font-family: 'Roboto', sans-serif;
    /* Fuente Roboto o una fuente sans-serif genérica */
    margin-bottom: 10px;
}

/* Estilo para la descripción del libro */
p {
    font-size: 16px;
    margin: 0;
    /* Elimina el margen superior e inferior de la descripción */
    max-height: 200px;
    /* Altura máxima de 100px */
    overflow: hidden;
    /* Oculta el contenido que excede la altura máxima */
    text-overflow: ellipsis;
    /* Agrega puntos suspensivos (...) al final del texto truncado */
    position: relative;
    /* Establece la posición como relativa para el botón "Leer más" */
}

.buy-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Más separación entre texto y logo */
    width: fit-content;
    margin-top: 15px;
    margin-bottom: 5px;
    text-align: center;
    background-color: #ffffff;
    color: #111;
    text-decoration: none;
    padding: 5px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    /* Texto un poco más grande */
    transition: all 0.25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 2px solid #ff9900;
}

.buy-button:hover {
    background-color: #fffaf0;
    /* Fondo con un toque cálido al pasar el ratón */
    border-color: #e47911;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.15);
    transform: translateY(-1px);
}

.buy-button::after {
    content: "";
    display: inline-block;
    width: 60px;
    /* Logo un poco más grande */
    height: 16px;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.reviews-button {
    display: block;
    /* Hace que el botón sea un elemento de bloque */
    width: fit-content;
    /* Ajusta el ancho al contenido (el texto) */
    margin-top: auto;
    /* Empuja el botón hacia abajo para alinear con la parte inferior de la imagen */
    text-align: center;
    /* Centra el texto horizontalmente */
    background-color: #fffb00a6;
    color: #0e0d0da8;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: inherit;
    margin-bottom: 10px;
    /* Agrega un margen inferior para separar el botón de la descripción */
    margin-top: 20px;
    /* Agrega un margen inferior para separar el botón de la descripción */
}

/* Estilo para el botón "Leer más" */
.read-more-button {
    margin-top: 10px;
    /* Agrega un margen superior para separar el botón de la descripción */
    background-color: #ff9900;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    font-size: inherit;
}

.example-description {
    display: inline-block;
    padding: 10px;
    background-color: #ffcc80;
    /* Color de fondo */
    color: #000;
    /* Color del texto en negro */
    border: none;
    /* Elimina el borde */
    border-radius: 10px;
    /* Hace que los bordes sean redondeados */
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    /* Centra el texto horizontalmente */
}

.example-description:hover {
    background-color: #ff9900;
    /* Cambia el color de fondo al mismo color que el botón "Enviar" al pasar el mouse */
}


/* Estilo para el título */
h1 {
    font-size: 35px;
    color: #333;
    text-align: center;
    padding: 50px;
    /* Espacio alrededor del título */
    max-width: 75%;
    /* Establece el ancho máximo al 100% */
    margin: 50px auto;
    /* Centra horizontalmente el elemento */
    line-height: 1.2;
    /* Espaciado entre líneas para dos líneas de texto */
}

#no-results p {
    font-family: 'Roboto', sans-serif;
    /* Aplica la fuente Roboto o la que hayas elegido */
    font-size: 13px;
    /* Tamaño de fuente */
    margin: 5px 0;
    /* Agrega un margen superior e inferior */
    font-weight: normal;
    /* Establece el peso de la fuente como normal (sin negritas) */
}

/* Estilo para el encabezado de ejemplos */
.example-header {
    font-size: 20px;
    /* Tamaño de fuente */
    font-weight: bold;
    /* Peso de la fuente en negrita */
    margin-bottom: 20px;
    /* Margen inferior de 20px (ajusta según tus preferencias) */
    font-family: 'Roboto', sans-serif;
    /* Aplica la fuente Roboto o la que prefieras */
}

/* Estilo para cada libro en dispositivos móviles */
@media screen and (max-width: 768px) {
    .book {
        flex-direction: column;
        /* Alinea los elementos en una columna en dispositivos móviles */
        width: 100%;
        /* Establece el ancho al 100% para ocupar todo el ancho disponible */
        margin-bottom: 20px;
        /* Agrega espacio entre los libros en dispositivos móviles */
        text-align: center;
        /* Centra el contenido horizontalmente en dispositivos móviles */
    }

    .book-info {
        margin-top: 10px;
        /* Agrega espacio entre la imagen y la información en dispositivos móviles */
    }

    .book-image {
        max-width: 50%;
        /* Ancho máximo de la imagen en dispositivos móviles */
        margin-right: 0;
        /* Elimina el margen derecho entre la imagen y el texto en dispositivos móviles */
        display: block;
        /* Para centrar la imagen horizontalmente */
        margin: 0 auto;
        /* Para centrar la imagen horizontalmente */
    }

    .full-description {
        text-align: justify;
        /* Justifica el texto de la descripción en dispositivos móviles */
    }

    .read-more-link {
        margin-top: 10px;
        /* Agrega espacio entre el botón "Leer más" y la descripción en dispositivos móviles */
        margin-bottom: 10px;
        /* Agrega espacio entre el botón "Leer más" y la descripción en dispositivos móviles */
    }

    .buy-button {
        margin-top: 15px;
        display: inline-flex;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Estilo para el menú desplegable */
.dropdown {
    position: relative;
    display: inline-block;
}

.menu-text {
    color: #ffffff;
    /* Color de texto original */
    padding: 10px;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #232f3e;
    /* Color de fondo original */
    min-width: 160px;
    z-index: 1;
}

.dropdown-content a {
    color: white;
    /* Color de texto original */
    padding: 18px 16px;
    text-decoration: none;
    display: block !important;
}

.dropdown-content a:hover {
    background-color: #232f3e;
    /* Color de fondo en el hover original */
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .menu-text {
    color: #ffffff;
    /* Color de texto en el hover original */
}

/* Estilo para la sección de novedades */
#novedades {
    padding: 20px;
    margin-top: 100px;
    /* Agrega margen superior para separar de otros contenidos */
    border-radius: 8px;
    /* Bordes redondeados */
    text-align: center;
    /* Centra el contenido horizontalmente */
}

#novedades h2 {
    font-size: 24px;
    /* Tamaño del título */
    color: #333;
    /* Color del texto */
    margin-bottom: 30px;
    /* Margen inferior del título */
}

#novedades ul {
    list-style-type: none;
    /* Elimina los marcadores de lista */
    padding: 0;
}

#novedades li {
    margin-bottom: 10px;
    /* Espacio entre elementos de la lista */
    display: inline-block;
    /* Coloca los elementos en línea y en rectángulos */
    border: 1px solid #ccc;
    /* Borde del rectángulo */
    border-radius: 8px;
    /* Bordes redondeados del rectángulo */
    padding: 10px;
    /* Espacio dentro del rectángulo */
    margin-right: 10px;
    /* Margen derecho entre rectángulos */
    transition: background-color 0.3s ease;
    /* Transición suave para el fondo del rectángulo */
}

#novedades li:hover {
    background-color: #ccc;
    /* Cambia el color de fondo del rectángulo al pasar el cursor */
}

#novedades a {
    text-decoration: none;
    /* Elimina el subrayado de los enlaces */
    color: #01070e;
    /* Color del texto del enlace */
    font-weight: bold;
    /* Texto en negrita */
    font-size: 18px;
    /* Tamaño del texto del enlace */
}

.youtube-button {
    font-size: 14px;
    /* Tamaño del texto */
    padding: 5px 10px;
    /* Relleno interno */
    border: none;
    /* Eliminar bordes */
    border-radius: 5px;
    /* Bordes redondeados */
    background-color: white;
    /* Color de fondo */
    color: black;
    /* Color del texto */
    display: inline-flex;
    /* Alinear el texto y el ícono */
    align-items: center;
    /* Centrar verticalmente */
    gap: 5px;
    /* Espacio entre el texto y el ícono */
    cursor: pointer;
    /* Cambiar el cursor al pasar el mouse */
    text-align: center;
    /* Centrar el texto horizontalmente */
    width: fit-content;
    /* Ajustar el ancho al contenido */
    height: auto;
    /* Ajustar la altura automáticamente */
    margin-top: 10px;
    /* Espacio entre el botón y el texto anterior */
}

.opinion-text {
    font-style: italic;
    /* Pone el texto en itálica */
    color: #6c757d;
    /* Define el color del texto a gris */
    display: -webkit-box;
    /* Necesario para usar -webkit-line-clamp */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Necesario para que el corte por línea funcione */
    overflow: hidden;
    /* Oculta cualquier contenido que se desborde de la caja */
    text-overflow: ellipsis;
    /* Asegura que aparezcan puntos suspensivos (...) al cortar */
    margin-top: 10px;
    /* 🔹 Agrega un margen arriba */
    margin-bottom: 10px;
    /* 🔹 Agrega un margen abajo */
}

.opinion-text-no-limit {
    font-style: italic;
    /* Pone el texto en itálica */
    color: #6c757d;
    /* Define el color del texto a gris */
    margin-top: 10px;
    /* 🔹 Agrega un margen arriba */
    margin-bottom: 10px;
    /* 🔹 Agrega un margen abajo */
}