/* --- Evita selección de texto e imágenes en el flipbook --- */
#book-container, #book-container * {
  user-select: none;           
  -webkit-user-select: none;   
  -moz-user-select: none;      
  -ms-user-select: none;       
  -webkit-tap-highlight-color: transparent; outline: none;               
  -webkit-touch-callout: none;
}

#preloader { position: absolute; inset: 0; background: #111; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; }
.spinner { width: 40px; height: 40px; border: 4px solid #555; border-top: 4px solid white; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

#main { background:#f3f3f3!important; padding:30px 10px!important; position:relative; }
#book-container { width: 900px; height: 600px; position: relative;margin:0 auto; }
#flipbook { width: 100%; height: 100%; }
#page-number { color: #333; font-size: 16px; margin-left: 10px; }

.page { background: white; position:relative; }
.page img { width: auto; height: 100%; object-fit: contain; display: block; margin: 0 auto; }
.page.even:after { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,.05); background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.09) 100%); }
.hard { background: #111; }
.controls { margin:30px 10px 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; justify-content: center; }
.controls button, .controls input { padding: 6px 12px; font-size: 14px; cursor: pointer; }
.controls button { background:#fff; }
.controls button:disabled, .controls input:disabled { opacity: 0.5; cursor: not-allowed; }
.controls input, .controls button { border-radius:30px; }
.controls input[type="number"] { width:86px; background:none; border:1px solid #333; cursor:default; }
.controls #zoom-out, .controls.zoom-in #zoom-in { display:none; }
.controls #zoom-in, .controls.zoom-in #zoom-out, .controls span { display:inline-block; }
.controls .controls-zoom { margin:0 20px; }

@media screen and (max-width: 960px) {
  #book-container { width: 780px; height: 520px; position: relative;margin:0 auto; }
}
@media screen and (max-width: 840px) {
  #book-container { width: 660px; height: 440px; position: relative;margin:0 auto; }
}
@media screen and (max-width: 767px) {
  #book-container { width: 330px; height: 440px; position: relative;margin:0 auto; }
  .controls .controls-zoom { margin:0; }
  .controls .controls-go { margin:20px 0 0; display:block; width:100%; text-align:center; }
}