/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Paleta de colores Jane Austen / Danmei / INFJ */
body {
    background-color: #eae1d4;
    background-image: url('https://transparenttextures.com'), 
                      url('https://transparenttextures.com'); 
    color: #2f3e35;
    font-family: 'Georgia', serif;
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
}

/* BARRA LATERAL IZQUIERDA */
.sidebar {
    width: 260px;
    background-color: rgba(247, 242, 232, 0.98);
    border-right: 2px double #b5a48c;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 2px 0 15px rgba(0,0,0,0.05);
}

.sidebar h1 {
    font-size: 1.4em;
    font-style: italic;
    color: #4a2c11;
    text-align: center;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #b5a48c;
    padding-bottom: 10px;
}

/* Configura el contenedor derecho solo para la página de inicio */
.main-content.vista-inicio {
    background-image: url('CR.jpg'); /* REEMPLAZA con el nombre o link de tu foto */
    background-size: cover;          /* Estira la imagen para cubrir todo el espacio sin deformarse */
    background-position: center;     /* Centra la foto */
    background-repeat: no-repeat;    /* Evita que se repita */
    display: flex;
    justify-content: center;         /* Centra horizontalmente el cuadro de texto */
    align-items: center;             /* Centra verticalmente el cuadro de texto */
    padding: 40px;
}

/* Cuadro flotante elegante para tu presentación (combinando con tu paleta Jane Austen) */
.presentacion-inicio {
    background-color: rgba(247, 242, 232, 0.95); /* Color crema de tu paleta con opacidad */
    border: 1px solid #b5a48c;
    padding: 40px;
    border-radius: 8px;
    max-width: 600px;
    text-align: center;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
}

/* Ajuste opcional para tus widgets dentro de la presentación */
.presentacion-inicio .widgets-inferiores {
    margin-top: 25px;
    justify-content: center;
}


/* Botones del Menú */
.menu-genero {
    background: #fffdf9;
    border: 1px solid #b5a48c;
    padding: 12px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #4a2c11;
    transition: all 0.2s ease;
}
.menu-genero:hover {
    background: #80232c;
    color: #f7f2e8;
    transform: translateX(5px);
}

/* CONTENIDO PRINCIPAL (DERECHA) */
.main-content {
    flex: 1;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    overflow-y: auto;
}

/* Reloj y Fecha */
.reloj-fecha {
    text-align: right;
    font-size: 0.85em;
    color: #6e7e75;
    margin-bottom: 30px;
}

/* VISTA DE REJILLA DE LIBROS */
.galeria-libros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.libro-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}
.libro-item:hover {
    transform: scale(1.04);
}

.portada-mini {
    width: 140px;
    height: 210px;
    background-color: #e8e2d5;
    margin: 0 auto 10px auto;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
    border-radius: 4px;
    border: 1px solid #c9bda7;
    overflow: hidden;
}
.portada-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.titulo-mini {
    font-size: 0.95em;
    font-weight: bold;
    color: #4a2c11;
    line-height: 1.3;
}

/* CUADRO DE INFORMACIÓN DESPLEGABLE */
.detalles-libro-pop {
    display: none; /* Oculto por defecto */
    background: #fffdf9;
    border: 1px solid #b5a48c;
    padding: 25px;
    margin-top: 30px;
    border-radius: 6px;
    box-shadow: inset 0 0 15px #f3ebd9, 0 5px 15px rgba(0,0,0,0.05);
}

/* Elementos internos de la reseña */
.estrellas { color: #d4af37; font-size: 1.2em; margin: 5px 0; }
.bloque-frase {
    font-style: italic;
    font-size: 1em;
    color: #55433c;
    background: #fdfaf2;
    border-left: 3px solid #80232c;
    padding: 10px;
    margin: 15px 0;
}

/* SECCIÓN INFERIOR COMPARTIDA */
.widgets-inferiores {
    margin-top: 50px;
    border-top: 1px dashed #b5a48c;
    padding-top: 20px;
    display: flex;
    gap: 20px;
}