/* ════════════════════════════════════════════════════════
   LUPA — integrada desde "El Maná v2 mana"
   Mismos tamaños, gestos, límites y salidas que el original.
   Solo cambia el dorado (#E6B422 → #c4a882) y la fuente del panel.
   ════════════════════════════════════════════════════════ */

/* ── HINT de zoom ── */
#zoomHint {
    position: fixed;
    bottom: calc(96px + var(--safe-b));
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 598;
    background: rgba(20, 20, 20, .9);
    border: 1px solid rgba(196, 168, 130, .35);
    color: rgba(255, 255, 255, .92);
    font-family: 'Playfair Display', serif;
    font-size: .8rem;
    letter-spacing: .3px;
    padding: 10px 18px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

#zoomHint.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    #zoomHint {
        bottom: calc(84px + var(--safe-b));
        font-size: .74rem;
        white-space: normal;
        text-align: center;
        max-width: 82%;
        line-height: 1.4;
    }
}

/* ── LUPA: botón y capa de zoom (capa superpuesta, no toca el flipbook) ── */
#btnZoom {
    position: fixed;
    bottom: calc(22px + var(--safe-b));
    right: 16px;
    z-index: 599;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(196, 168, 130, .35);
    color: rgba(255, 255, 255, .9);
    font-size: 1.1rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, color .25s;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

#btnZoom:hover {
    background: rgba(196, 168, 130, .12);
    border-color: rgba(196, 168, 130, .55);
    color: #c4a882;
}

@media (max-width: 600px) {
    #btnZoom {
        bottom: calc(14px + var(--safe-b));
        right: 12px;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
}

#zoomOverlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .97);
    touch-action: none;
}

#zoomOverlay.open {
    display: flex;
}

#zoomStage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

#zoomStage.zoomed {
    cursor: grabbing;
}

#zoomImg {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    max-width: none;
    max-height: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* El clon de la página vive fuera de #flipbook: reponer fondo y recorte base */
#zoomImg .page {
    background: #fff;
    overflow: hidden;
}

.zoom-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, color .25s;
}

.zoom-close:hover {
    background: rgba(240, 80, 80, .15);
    border-color: rgba(240, 80, 80, .45);
    color: #f87171;
}

.zoom-controls {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(20, 20, 20, .85);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50px;
    padding: 7px 13px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.zoom-ctrl {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s, color .2s;
    line-height: 1;
}

.zoom-ctrl:hover {
    background: rgba(196, 168, 130, .15);
    border-color: rgba(196, 168, 130, .45);
    color: #c4a882;
}

#zoomLevel {
    color: rgba(255, 255, 255, .85);
    font-family: 'Playfair Display', serif;
    font-size: .78rem;
    min-width: 46px;
    text-align: center;
    letter-spacing: .5px;
}

/* ══ Iconos (Font Awesome) dentro de la lupa ══ */
#btnZoom i {
    font-size: 1rem;
    line-height: 1;
}

.zoom-close i {
    font-size: .95rem;
    line-height: 1;
}

.zoom-ctrl i {
    font-size: .85rem;
    line-height: 1;
}

#zoomHint i {
    font-size: .86em;
    opacity: .8;
}