/* =========================================================
   INGPRO — VISOR PDF RESPONSIVO TIPO LIBRO
   Archivo: css/catalogo-libro-fix.css
========================================================= */

/* =========================================================
   ELEMENTOS OCULTOS
========================================================= */

.catalog-book__sheet[hidden],
.catalog-book__loading[hidden],
.catalog-book-error[hidden] {
    display: none !important;
}

/* =========================================================
   VENTANA GENERAL
========================================================= */

.catalog-viewer__window {
    width: 100% !important;
    max-width: none !important;

    margin-inline: auto !important;
}

/* =========================================================
   ÁREA EXTERIOR
========================================================= */

.catalog-book {
    position: relative;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    padding:
        2rem 4.7rem 2.7rem !important;

    overflow: hidden !important;

    background:
        radial-gradient(ellipse at 50% 85%,
            rgba(6, 20, 47, 0.18),
            transparent 38%),
        linear-gradient(145deg,
            #dce4ee 0%,
            #f8fafc 50%,
            #dce4ee 100%);

    box-sizing: border-box !important;
}

.catalog-book::after {
    content: "";

    position: absolute;
    right: 12%;
    bottom: 1.1rem;
    left: 12%;

    height: 65px;

    border-radius: 50%;

    background:
        radial-gradient(ellipse at center,
            rgba(6, 20, 47, 0.2),
            transparent 70%);

    filter: blur(14px);

    pointer-events: none;
}

/* =========================================================
   CARGANDO
========================================================= */

.catalog-book__loading {
    position: absolute;
    inset: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 520px;

    background-color:
        rgba(242, 246, 251, 0.97);

    color: #12213d;

    font-size: 0.9rem;
    font-weight: 850;
}

/* =========================================================
   CONTENEDOR DEL DOCUMENTO
========================================================= */

.catalog-book__spread {
    position: relative;
    z-index: 5;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 1320px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;

    overflow: hidden !important;

    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    box-sizing: border-box !important;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.catalog-book__spread--cover,
.catalog-book__spread--single {
    justify-content: center !important;
}

.catalog-book--changing .catalog-book__spread {
    opacity: 0.45;

    transform: scale(0.995);
}

/* =========================================================
   ZOOM ACTIVO
========================================================= */

.catalog-book--zoomed-in .catalog-book__spread {
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    height: clamp(560px,
            76dvh,
            900px) !important;

    max-height: clamp(560px,
            76dvh,
            900px) !important;

    overflow: auto !important;

    scrollbar-width: thin;
    scrollbar-color:
        #fdb427 #dce4ee;

    cursor: grab;
}

.catalog-book__spread--dragging {
    cursor: grabbing !important;

    user-select: none;
}

/* Barras del zoom */

.catalog-book--zoomed-in .catalog-book__spread::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.catalog-book--zoomed-in .catalog-book__spread::-webkit-scrollbar-track {
    background-color: #dce4ee;
}

.catalog-book--zoomed-in .catalog-book__spread::-webkit-scrollbar-thumb {
    border: 3px solid #dce4ee;
    border-radius: 999px;

    background-color: #fdb427;
}

/* =========================================================
   HOJAS
========================================================= */

.catalog-book__sheet {
    position: relative;

    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;

    width: auto;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0.25rem !important;

    overflow: visible !important;

    border:
        1px solid rgba(6, 20, 47, 0.13) !important;

    background-color: #ffffff !important;

    box-sizing: border-box !important;
}

/* Página izquierda */

.catalog-book__sheet--left {
    border-radius:
        18px 2px 2px 18px !important;

    box-shadow:
        -18px 25px 50px rgba(6, 20, 47, 0.18) !important;
}

/* Página derecha */

.catalog-book__sheet--right {
    border-radius:
        2px 18px 18px 2px !important;

    box-shadow:
        18px 25px 50px rgba(6, 20, 47, 0.18) !important;
}

/* Portada */

.catalog-book__spread--cover .catalog-book__sheet--right {
    border-radius: 18px !important;

    box-shadow:
        0 30px 65px rgba(6, 20, 47, 0.26) !important;
}

/* Última página sola */

.catalog-book__spread--single .catalog-book__sheet--left {
    border-radius: 18px !important;

    box-shadow:
        0 30px 65px rgba(6, 20, 47, 0.26) !important;
}

/* =========================================================
   CENTRO DEL LIBRO
========================================================= */

.catalog-book__sheet--left::after,
.catalog-book__sheet--right::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 9;

    width: 32px;

    pointer-events: none;
}

.catalog-book__sheet--left::after {
    right: 0;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(6, 20, 47, 0.04) 40%,
            rgba(6, 20, 47, 0.18));
}

.catalog-book__sheet--right::before {
    left: 0;

    background:
        linear-gradient(90deg,
            rgba(6, 20, 47, 0.18),
            rgba(6, 20, 47, 0.04) 60%,
            transparent);
}

.catalog-book__spread--cover .catalog-book__sheet--right::before,
.catalog-book__spread--single .catalog-book__sheet--left::after {
    display: none !important;
}

/* =========================================================
   CANVAS PDF
========================================================= */

.catalog-book__sheet canvas {
    position: relative;
    z-index: 3;

    display: block !important;
    flex: 0 0 auto !important;

    /*
     * IMPORTANTE:
     * El tamaño interno del canvas usa la densidad de pantalla.
     * El tamaño visible usa esta variable calculada por JavaScript.
     *
     * No usar width: auto !important aquí, porque en celulares
     * duplicaría visualmente el ancho por el devicePixelRatio.
     */
    width: var(--catalog-canvas-width, auto) !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background-color: #ffffff;

    object-fit: contain !important;

    box-sizing: border-box !important;
}

/* =========================================================
   NÚMERO DE PÁGINA
========================================================= */

.catalog-book__page-number {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 35px !important;

    width: 100% !important;
    min-height: 35px !important;

    margin: 0 !important;
    padding: 0.4rem 0.7rem !important;

    border-top:
        1px solid rgba(6, 20, 47, 0.09) !important;

    background:
        linear-gradient(180deg,
            #ffffff,
            #eef2f7) !important;

    color: #65738a !important;

    font-size: 0.72rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;

    box-sizing: border-box !important;
}

/* =========================================================
   FLECHAS
========================================================= */

.catalog-book__arrow {
    position: absolute;
    top: 50%;
    z-index: 30;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 2px solid #fdb427 !important;
    border-radius: 50% !important;

    background:
        linear-gradient(145deg,
            #06142f,
            #123568) !important;

    color: #ffffff !important;

    box-shadow:
        0 17px 35px rgba(6, 20, 47, 0.33) !important;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        opacity 0.25s ease;
}

.catalog-book__arrow--previous {
    left: 1rem !important;
}

.catalog-book__arrow--next {
    right: 1rem !important;
}

.catalog-book__arrow span {
    display: block;

    margin-top: -5px;

    font-size: 2.7rem;
    line-height: 1;
}

.catalog-book__arrow:hover:not(:disabled) {
    background: #fdb427 !important;
    color: #06142f !important;

    transform:
        translateY(-50%) scale(1.09);
}

.catalog-book__arrow:disabled {
    opacity: 0.24;

    cursor: not-allowed;
}

/* =========================================================
   CONTROLES INFERIORES
========================================================= */

.catalog-book-controls {
    display: grid !important;
    grid-template-columns:
        auto minmax(0, 1fr) auto !important;

    align-items: center;
    gap: 1rem;

    min-height: 68px;
    padding: 0.8rem 1rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(180deg,
            #17263f,
            #0d1b32);
}

.catalog-book-controls p {
    margin: 0;

    color: rgba(255, 255, 255, 0.84);

    font-size: 0.83rem;
    font-weight: 850;
    text-align: center;
}

.catalog-book-controls button {
    min-height: 42px;
    padding: 0.6rem 0.95rem;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    background-color:
        rgba(255, 255, 255, 0.07);

    color: #ffffff;

    font-size: 0.7rem;
    font-weight: 800;

    cursor: pointer;
}

.catalog-book-controls button:hover:not(:disabled) {
    border-color: #fdb427;

    background-color: #fdb427;
    color: #06142f;
}

.catalog-book-controls button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


/* =========================================================
   TABLET Y NOTEBOOK COMPACTO — UNA PÁGINA
========================================================= */

.catalog-book--single-layout {
    padding:
        1.4rem 3.4rem 2.2rem !important;
}

.catalog-book--single-layout
.catalog-book__spread {
    width: 100% !important;
    max-width: 780px !important;

    justify-content: center !important;
}

.catalog-book--single-layout
.catalog-book__sheet--left,
.catalog-book--single-layout
.catalog-book__sheet--right {
    border-radius: 16px !important;

    box-shadow:
        0 24px 52px rgba(6, 20, 47, 0.22) !important;
}

.catalog-book--single-layout
.catalog-book__sheet--left::after,
.catalog-book--single-layout
.catalog-book__sheet--right::before {
    display: none !important;
}

.catalog-book--single-layout
.catalog-book__arrow {
    width: 48px !important;
    height: 48px !important;
}

.catalog-book--single-layout
.catalog-book__arrow--previous {
    left: 0.55rem !important;
}

.catalog-book--single-layout
.catalog-book__arrow--next {
    right: 0.55rem !important;
}

.catalog-book--single-layout.catalog-book--zoomed-in
.catalog-book__spread {
    max-width: 100% !important;
    justify-content: flex-start !important;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {
    .catalog-book {
        padding:
            1.5rem 3.5rem 2.4rem !important;
    }

    .catalog-book__arrow {
        width: 50px !important;
        height: 50px !important;
    }

    .catalog-book__arrow--previous {
        left: 0.5rem !important;
    }

    .catalog-book__arrow--next {
        right: 0.5rem !important;
    }
}

/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 760px) {
    /*
     * El documento recibe prácticamente todo el ancho.
     * Las flechas quedan superpuestas y no restan espacio.
     */

    .catalog-book {
        width: 100% !important;

        padding:
            0.65rem 0.25rem 1rem !important;

        overflow: hidden !important;
    }

    /*
     * A 100%, la hoja y el canvas nunca pueden superar
     * el ancho visible del celular.
     */
    .catalog-book:not(.catalog-book--zoomed-in)
    .catalog-book__sheet {
        max-width: 100% !important;
    }

    .catalog-book:not(.catalog-book--zoomed-in)
    .catalog-book__sheet canvas {
        max-width: 100% !important;
    }

    .catalog-book__spread,
    .catalog-book__spread--cover,
    .catalog-book__spread--single {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        justify-content: center !important;

        margin: 0 !important;

        overflow: hidden !important;
    }

    /*
     * Solamente cuando se amplía se activa el
     * desplazamiento táctil.
     */

    .catalog-book--zoomed-in
    .catalog-book__sheet,
    .catalog-book--zoomed-in
    .catalog-book__sheet canvas {
        max-width: none !important;
    }

    .catalog-book--zoomed-in .catalog-book__spread {
        width: 100% !important;
        max-width: 100% !important;

        height: clamp(560px,
                76dvh,
                780px) !important;

        max-height: clamp(560px,
                76dvh,
                780px) !important;

        justify-content: flex-start !important;

        overflow: auto !important;

        touch-action: pan-x pan-y;
    }

    .catalog-book__sheet {
        min-width: 0 !important;

        border-radius: 13px !important;

        box-shadow:
            0 18px 38px rgba(6, 20, 47, 0.22) !important;
    }

    .catalog-book__sheet--left::after,
    .catalog-book__sheet--right::before {
        display: none !important;
    }

    .catalog-book__page-number {
        flex-basis: 32px !important;

        min-height: 32px !important;

        font-size: 0.66rem !important;
    }

    /*
     * Flechas sobre el documento.
     * No modifican el cálculo del ancho.
     */

    .catalog-book__arrow {
        width: 39px !important;
        height: 39px !important;

        background:
            rgba(6, 20, 47, 0.9) !important;

        box-shadow:
            0 8px 20px rgba(6, 20, 47, 0.28) !important;
    }

    .catalog-book__arrow span {
        font-size: 1.85rem;
    }

    .catalog-book__arrow--previous {
        left: 0.2rem !important;
    }

    .catalog-book__arrow--next {
        right: 0.2rem !important;
    }

    .catalog-book-controls {
        grid-template-columns:
            1fr 1fr !important;

        gap: 0.65rem;
    }

    .catalog-book-controls p {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .catalog-book-controls button {
        width: 100%;

        padding-inline: 0.5rem;

        font-size: 0.66rem;
    }
}

/* =========================================================
   CELULAR MUY PEQUEÑO
========================================================= */

@media (max-width: 390px) {
    .catalog-book {
        padding:
            0.5rem 0.15rem 0.85rem !important;
    }

    .catalog-book__arrow {
        width: 36px !important;
        height: 36px !important;
    }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .catalog-book__spread,
    .catalog-book__sheet,
    .catalog-book__arrow,
    .catalog-book-controls button {
        transition: none;
    }
}