body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita barras de scroll en el body */
    background-color: #333; /* Color de fondo fuera del libro */
    font-family: Arial, sans-serif;
}

#book-viewer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: relative; 
}

/*
 * --- ESTILOS DEL LIBRO (SIMPLIFICADOS PARA TURN.JS) ---
 * Turn.js controlará el tamaño, la posición y las transformaciones.
 * Nosotros solo definimos el estado inicial.
*/
#book {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Estilo que Turn.js aplica a las páginas. Asegura que el contenido se ajuste bien. */
.page {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Color de fondo por si la imagen no carga */
}

.page img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Asegura que toda la imagen sea visible */
    user-select: none;
    pointer-events: none; /* Evita que la imagen interfiera con el canvas */
}

/* --- ZONAS DE NAVEGACIÓN (SIN CAMBIOS) --- */
.nav-margin {
    position: absolute;
    top: 0;
    width: 50px; /* Grosor del margen para hacer click */
    height: 100%;
    z-index: 1000; /* Asegura que esté por encima de las páginas */
    cursor: pointer;
}

.nav-margin.left-margin {
    left: 0;
}

.nav-margin.right-margin {
    right: 0;
}

/* --- ESTILOS DE ELEMENTOS INTERACTIVOS (SIN CAMBIOS) --- */

/* Botones de Audio */
.audio-btn {
    position: absolute;
    pointer-events: auto;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #888;
    padding: 8px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.audio-btn:hover {
    background: #ffe;
}
.audio-btn.playing {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Para evitar selección de texto/imágenes */
body, #book-viewer, #book {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}