html, body { margin: 0; height: 100%; background: #999966; font: 14px/1.4 Georgia, "Times New Roman", serif; color: #fff; }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 12px; box-sizing: border-box; }
#libro { display: flex; justify-content: center; height: calc(100vh - 110px); max-width: 100%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.hoja { height: 100%; aspect-ratio: 703 / 1024; background: #f1e9d6; }
.hoja img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hoja.vacia { visibility: hidden; }
.izquierda { box-shadow: inset -18px 0 22px -18px rgba(0,0,0,.45); }
.derecha { box-shadow: inset 18px 0 22px -18px rgba(0,0,0,.45); }
#panel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
#panel button, #panel a { background: #5c3c1e; color: #fff; border: 0; border-radius: 3px; padding: 6px 12px; font: inherit; cursor: pointer; text-decoration: none; }
#panel button:disabled { opacity: .45; cursor: default; }
#folio { min-width: 7em; text-align: center; }
@media (max-width: 700px) { #libro { height: auto; width: 100%; } .hoja { width: 100%; height: auto; } .izquierda { display: none; } }