/* =========================================
   CUARTO DE DESVELO (ESTILO BOCETO A TINTA)
   ========================================= */

.diorama-ilustrado {
    max-width: 900px; height: 600px; margin: 40px auto;
    background-color: #fdf5e6;
    border: 3px solid #111;
    border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px;
    position: relative; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    transition: filter 0.5s ease;
}

.diorama-ilustrado.lamp-off { filter: brightness(0.4) sepia(0.5); }

/* VENTANA E ILUSTRACIONES */
.pared-fondo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.ventana-ilustrada-container { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 320px; height: 400px; z-index: 2; }
.ventana-ilustrada-container img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)); }
.item-lamp img { height: 120px; mix-blend-mode: multiply; filter: contrast(1.1) saturate(1.2); }

/* CUADROS */
.cuadro-boceto { position: absolute; padding: 8px; background: transparent; cursor: url('estrella.png') 16 16, pointer; transition: transform 0.2s; }
.cuadro-boceto:hover { transform: scale(1.05) rotate(2deg); }
.marco-tinta { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #111; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; pointer-events: none; }
.cuadro-boceto img { max-width: 80px; height: auto; display: block; filter: grayscale(100%) contrast(1.5); }

/* REPISAS */
.repisas-container { position: absolute; top: 50px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 40px; box-sizing: border-box; z-index: 5; pointer-events: none; }
.estante-boceto-col { width: 25%; display: flex; flex-direction: column; gap: 60px; pointer-events: auto; }
.estante-linea { display: flex; align-items: flex-end; justify-content: flex-start; border-bottom: 4px solid #111; padding-bottom: 2px; height: 100px; border-radius: 255px 5px 225px 5px/5px 225px 5px 255px; }

/* LIBROS */
.book { position: relative; border: 2px solid #111; border-radius: 2px 5px 5px 2px / 2px 10px 10px 2px; box-shadow: -2px 0 0 rgba(0,0,0,0.1); transition: transform 0.2s; cursor: url('estrella.png') 16 16, pointer !important; display: flex; align-items: center; justify-content: center; }
.book:hover { transform: translateY(-5px) rotate(-2deg); }
.book.vertical { width: 25px; height: 90px; } .book.tall { height: 110px; } .book.thick { width: 35px; }
.book.leaning-left { width: 25px; height: 90px; transform: rotate(-15deg); transform-origin: bottom right; margin-right: 5px; }
.book.leaning-right { width: 25px; height: 90px; transform: rotate(15deg); transform-origin: bottom left; margin-left: 5px; }
.book.stack { flex-direction: column-reverse; border: none; box-shadow: none; background: transparent; }
.book.horizontal { width: 80px; height: 20px; border-top: 2px solid rgba(255,255,255,0.5); border-left: 2px solid #111; border-right: 2px solid #111; border-bottom: 2px solid #111; margin-bottom: 2px;}

/* LOMOS COLOR Y TEXTURA */
.spine-crimson { background: #791414; color: #fdf5e6; }
.spine-black { background: #1a1a1a; color: #fdf5e6; }
.spine-bone { background: #e0d5c1; color: #111; }
.spine-poe { background-image: url('Recurso 55811.jpg'); background-size: cover; background-position: center; border: none; box-shadow: -3px 0 5px rgba(0,0,0,0.6); }
.spine-stars { background-image: url('7852a4c165a1b8006c7fdd8ffc535387.jpg'); background-size: auto 100%; background-position: center; border: none; box-shadow: -3px 0 5px rgba(0,0,0,0.6); }
.spine-redgold { background-image: url('cbc2870bf7ca179821ee8408305315ff.png'); background-size: auto 100%; background-position: center; border: none; box-shadow: -3px 0 5px rgba(0,0,0,0.6); }

/* FANTASMA DE LA ÓPERA */
.spine-phantom {
    background-image: url('cb232370da3616bdd5c03869e4d544bc.jpg');
    background-size: auto 100%;
    background-position: center; /* Enfoca el centro de la imagen completa, que es el lomo */
    border: none;
    box-shadow: -3px 0 5px rgba(0,0,0,0.6);
}

.book-title { font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; white-space: nowrap; }
.book.vertical .book-title, .book.leaning-left .book-title, .book.leaning-right .book-title { writing-mode: vertical-rl; transform: rotate(180deg); }

/* SILLÓN Y OBJETOS */
.sillon-boceto { position: absolute; bottom: -15px; right: 25%; z-index: 10; }
.sillon-boceto img { width: 250px; mix-blend-mode: multiply; filter: contrast(1.2) brightness(0.9); }
.css-notebook-placeholder { font-size: 2rem; margin-bottom: 5px; }

/* MODALES */
.book-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.9); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.juani-notebook-content { width: 90vw; max-width: 850px; height: 80vh; background: #d4b38d; border: 6px solid #5c3a21; border-radius: 6px; position: relative; display: flex; padding: 15px 15px 15px 35px; box-sizing: border-box; }
.notebook-spine-rings { position: absolute; left: 12px; top: 5%; width: 15px; height: 90%; background: repeating-linear-gradient(to bottom, #222, #222 10px, transparent 10px, transparent 25px); border-right: 3px double #888; }
.notebook-page-left, .notebook-page-right { flex: 1; height: 100%; background: #faf5eb; padding: 40px 30px; background-image: linear-gradient(rgba(170, 200, 240, 0.5) 1px, transparent 1px); background-size: 100% 24px; line-height: 24px; }
.notebook-title { font-family: 'Courier New', monospace; font-weight: bold; color: #333; margin-top: 0; }
.notebook-handwriting { font-family: 'Courier New', monospace; font-size: 15px; color: #1c2541; margin: 0 0 24px 0; font-style: italic; }
.notebook-textarea { width: 100%; height: 85%; background: transparent; border: none; outline: none; font-family: 'Courier New', monospace; font-style: italic; font-size: 15px; color: #2a3439; resize: none; }
.close-notebook-btn { position: absolute; top: -45px; right: 0; background: #791414; color: #fff; border: none; padding: 8px 15px; font-family: monospace; font-weight: bold; cursor: pointer; border-radius: 4px; }

.book-modal-content.epub-theme { width: 90vw; max-width: 1100px; height: 75vh; background: #42221d !important; border: 5px solid #8b1e1e !important; box-shadow: inset 0 0 0 6px #0d2638, inset 0 0 30px rgba(0,0,0,0.9), 0 30px 60px rgba(0,0,0,0.9) !important; border-radius: 8px !important; display: flex; flex-direction: column; position: relative; margin-top: 50px; padding: 25px; }
.epub-reader-container { display: flex; flex: 1; align-items: center; justify-content: space-between; position: relative; background: #fcf6eb; border-radius: 3px; padding: 40px 60px; box-shadow: inset 0 0 40px rgba(139,115,85,0.3); }
.book-cover-stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fdf6e9; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box; }
.book-cover-stage h2 { color: #8b1e1e; font-size: 2.8rem; margin-bottom: 5px; text-transform: uppercase; }
.start-reading-btn { background: #8b1e1e; color: #fff; border: none; padding: 12px 30px; font-family: 'Courier New', monospace; font-weight: bold; cursor: pointer; }
#epub-viewer { flex: 1; height: 100%; overflow: hidden; z-index: 2; transition: opacity 0.15s ease, transform 0.15s ease; }
.epub-header { position: absolute; top: -55px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0; }
.epub-tool-btn, .close-book-btn { background: #111; color: #ff3333; border: 1px solid #791414; padding: 8px 15px; font-family: 'Courier New', monospace; font-weight: bold; cursor: pointer; }
.epub-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.2); border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 1.5rem; color: #361712; cursor: pointer; z-index: 10; }
.prev-btn { left: 10px; } .next-btn { right: 10px; }