/*
=====================================================
 FLIPBOOK - PORTAFOLIO DE SERVICIOS CPS
 Drupal 11 + Bootstrap Barrio
=====================================================
*/


/*
=====================================================
 1. PÁGINA FLIPBOOK
=====================================================
*/

/* Ocultar título automático Drupal */
.path-flipbook #block-bootstrap-barrio-subtheme-page-title {

    display:none;
    margin:0;
    padding:0;

}


/* Ocultar imagen propia de entidad Flipbook */
.path-flipbook .field--type-image {

    display:none;
    margin:0;
    padding:0;

}


/* Eliminar espacios del layout */
.path-flipbook .main-content,
.path-flipbook .region-content {

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

}



/*
=====================================================
 2. CONTENEDOR INTERNO FLIPBOOK
=====================================================
*/

.flipbook-page {

    background:#f4f4f4;

    min-height:100vh;

    padding:0;

}


.flipbook-page .pdfcontainer {

    height:100vh;

    width:100%;

    margin:0;

    border:1px solid #dedede;

    box-shadow:0 0 15px rgba(0,0,0,.15);

}



/*
=====================================================
 3. MODAL PORTAFOLIO
=====================================================
*/


.cps-modal-flipbook {


    max-width:95vw;

    height:90vh;


}


/* Contenedor principal */

.cps-modal-flipbook .modal-content {


    height:100%;

    background:#ffffff;

    border:0;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

}



/*
=====================================================
 4. HEADER MODAL
=====================================================
*/


.cps-modal-header {


    background:#ffffff;

    padding:.4rem 1rem;

    border-bottom:1px solid #e5e5e5;

    min-height: 40px;

    align-items: center;


}

.cps-modal-header p {
  margin-top: 0;
  margin-bottom: 0;
}



.cps-modal-header .modal-title {


    color:#007b6d;

    font-size:1rem;

    font-weight:700;

    margin-bottom: 0;
    line-height: 1.2;

}


.cps-modal-icon {


    color:#007b6d;

    font-size:1.4rem;

    margin-right:.5rem;


}


.cps-modal-header .btn-close {


    opacity:.6;

    transform:scale(.9);


}


.cps-modal-header .btn-close:hover {


    opacity:1;

    transform:scale(1);


}



/*
=====================================================
 5. CUERPO MODAL + IFRAME
=====================================================
*/


.cps-modal-flipbook .modal-body {


    padding:0;

    height:calc(90vh - 60px);

    overflow:hidden;


}



.flipbook-frame {


    width:100%;

    height:100%;

    border:0;

    display:block;

    background:#f5f5f5;


}



/*
=====================================================
 6. FONDO MODAL BOOTSTRAP
=====================================================
*/


.modal-backdrop.show {


    opacity:.65;


}



/*
=====================================================
 7. RESPONSIVE
=====================================================
*/


@media(max-width:768px){


    .cps-modal-flipbook {


        max-width:100%;

        height:100vh;

        margin:0;


    }



    .cps-modal-flipbook .modal-content {


        border-radius:0;


    }



    .cps-modal-flipbook .modal-body {


        height:calc(100vh - 60px);


    }


}

/*
=====================================================
 LOADER FLIPBOOK
=====================================================
*/

.cps-modal-flipbook .modal-body{

    position:relative;

    overflow:hidden;

}


.flipbook-loader{

    position:absolute;

    inset:0;

    background:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:20;

    transition:opacity .35s ease;

}


.flipbook-loader.oculto{
    opacity:0;
    visibility:hidden;
    display:none;
}

/* Ensure iframe fills modal body and use flex layout */
.cps-modal-flipbook .modal-body {
    display:flex;
    flex-direction:column;
}
.cps-modal-flipbook .modal-body > p {
    flex:1;
    margin:0;
    height:100%;
}


.flipbook-loader .spinner-border{

    width:3rem;

    height:3rem;

    color:#007b6d;

}


.flipbook-loader h5{

    color:#007b6d;

    font-weight:600;

}


.flipbook-loader small{

    color:#777;

}