/*==========================================================
MULTIMEDIA VIEWER
Negocios con Osio
Parte 1/2
==========================================================*/

:root{

    --mv-bg:rgba(0,0,0,.95);

    --mv-panel:#111111;

    --mv-panel-2:#1b1b1b;

    --mv-gold:#d4af37;

    --mv-text:#ffffff;

    --mv-muted:#b9b9b9;

    --mv-border:rgba(255,255,255,.08);

    --mv-radius:18px;

    --mv-shadow:0 25px 80px rgba(0,0,0,.65);

}

/*==========================================================*/

#multimediaViewer{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--mv-bg);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999999;

    overflow:hidden;

}

#multimediaViewer.active{

    opacity:1;

    visibility:visible;

}

/*==========================================================*/

#multimediaBackdrop{

    position:absolute;

    inset:0;

    backdrop-filter:blur(10px);

}

/*==========================================================*/

#multimediaWindow{

    position:relative;

    width:min(98vw,1800px);

    height:min(96vh,1050px);

    background:var(--mv-panel);

    border-radius:var(--mv-radius);

    overflow:hidden;

    box-shadow:var(--mv-shadow);

    display:flex;

    flex-direction:column;

    border:1px solid var(--mv-border);

}

/*==========================================================*/

#multimediaHeader{

    height:74px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px;

    background:linear-gradient(180deg,#222,#111);

    border-bottom:1px solid var(--mv-border);

    flex-shrink:0;

}

/*==========================================================*/

#multimediaTitle{

    margin:0;

    color:var(--mv-text);

    font-size:28px;

    font-weight:700;

}

/*==========================================================*/

#multimediaSubtitle{

    margin-top:4px;

    color:var(--mv-muted);

    font-size:14px;

}

/*==========================================================*/

#multimediaClose{

    width:48px;

    height:48px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:24px;

    transition:.25s;

}

#multimediaClose:hover{

    background:#fff;

    color:#000;

    transform:scale(1.08);

}

/*==========================================================*/

#multimediaBody{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:calc(100vh - 145px);

    background:#101010;

    overflow:hidden;

}

/*==========================================================*/

#viewerVideo{

    width:100%;

    height:100%;

    object-fit:contain;

    display:none;

    background:#000;

}

/*==========================================================*/

#viewerPdf{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:100%;

    overflow:hidden;

    background:#111;

    position:relative;

}

#flipbookContainer{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:100%;

    overflow:hidden;

    position:relative;

}

/*==========================================================*/

#viewerImages{

    width:100%;

    height:100%;

    display:none;

    justify-content:center;

    align-items:center;

}

#viewerImages img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}

/*==========================================================*/

#viewerYoutube{

    width:100%;

    height:100%;

    border:none;

    display:none;

    background:#000;

}

/*==========================================================*/

#viewerLoading{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:18px;

    background:rgba(0,0,0,.45);

    z-index:50;

    display:none;

}

/*==========================================================*/

#multimediaFooter{

    height:66px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

    background:#141414;

    border-top:1px solid var(--mv-border);

    flex-shrink:0;

}

/*==========================================================*/

#multimediaCounter{

    color:#fff;

    font-size:14px;

}

#multimediaType{

    color:var(--mv-gold);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.12em;

}

/*==========================================================*/

.multimedia-controls{

    display:flex;

    align-items:center;

    gap:10px;

}

/*==========================================================*/

.multimedia-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    background:#232323;

    transition:.25s;

}

.multimedia-btn:hover{

    background:var(--mv-gold);

    color:#000;

}

/*==========================================================*/

.multimedia-primary{

    border:none;

    border-radius:30px;

    padding:11px 22px;

    background:var(--mv-gold);

    color:#000;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.multimedia-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(212,175,55,.35);

}

/*==========================================================*/

.hidden{

    display:none !important;

}

/*==========================================================*/

.fade-enter{

    animation:mvFade .35s ease;

}

@keyframes mvFade{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

#viewerPdf iframe{

    width:100%;

    height:100%;

    border:none;

    background:#222;

}

#viewerPdf canvas{

    display:block;

    margin:auto;

    max-width:100%;

    max-height:100%;

}

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

#flipbookContainer{

    width:100%;

    height:100%;

    display:none;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:#2b2b2b;

}

#flipbook{

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    transform-origin:center center;

    transition:transform .20s ease;

    will-change:transform;

}

#flipbook .page{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ffffff;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

}

#flipbook canvas{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    image-rendering:auto;

}

/*==========================================================*/
/* VIDEO */
/*==========================================================*/

#viewerVideo::-webkit-media-controls{

    filter:contrast(1.05);

}

#viewerVideo:focus{

    outline:none;

}

/*==========================================================*/
/* SCROLLBAR */
/*==========================================================*/

#multimediaWindow ::-webkit-scrollbar{

    width:10px;

    height:10px;

}

#multimediaWindow ::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}

#multimediaWindow ::-webkit-scrollbar-track{

    background:#1c1c1c;

}

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

.multimedia-spinner{

    width:60px;

    height:60px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.2);

    border-top-color:var(--mv-gold);

    animation:mvSpin 1s linear infinite;

}

@keyframes mvSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==========================================================*/
/* ANIMACIONES */
/*==========================================================*/

.mv-slide-in{

    animation:mvSlideIn .35s ease;

}

@keyframes mvSlideIn{

    from{

        transform:translateY(40px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

.mv-fade{

    animation:mvOpacity .25s linear;

}

@keyframes mvOpacity{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/*==========================================================*/
/* RESPONSIVE */
/*==========================================================*/

@media(max-width:1200px){

    #multimediaWindow{

        width:96vw;

        height:92vh;

    }

}

@media(max-width:992px){

    #multimediaHeader{

        padding:0 18px;

    }

    #multimediaTitle{

        font-size:22px;

    }

}

@media(max-width:768px){

    #multimediaWindow{

        width:100vw;

        height:100vh;

        border-radius:0;

    }

    #multimediaHeader{

        height:64px;

        padding:0 14px;

    }

    #multimediaFooter{

        height:60px;

        padding:0 14px;

    }

    #multimediaTitle{

        font-size:18px;

    }

    #multimediaSubtitle{

        font-size:12px;

    }

    #multimediaClose{

        width:42px;

        height:42px;

        font-size:20px;

    }

    .multimedia-btn{

        width:38px;

        height:38px;

    }

    .multimedia-primary{

        padding:9px 16px;

        font-size:14px;

    }

}

@media(max-width:576px){

    #multimediaCounter{

        font-size:12px;

    }

    #multimediaType{

        font-size:11px;

    }

    .multimedia-controls{

        gap:6px;

    }

}

/*==========================================================*/
/* PRINT */
/*==========================================================*/

@media print{

    #multimediaViewer{

        display:none !important;

    }

}

/*==========================================================*/
/* UTILIDADES */
/*==========================================================*/

.mv-hidden{

    display:none !important;

}

.mv-visible{

    display:block !important;

}

.mv-flex{

    display:flex !important;

}

.mv-center{

    justify-content:center;

    align-items:center;

}

.mv-shadow{

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

}

.mv-rounded{

    border-radius:14px;

}

.mv-no-select{

    user-select:none;

    -webkit-user-select:none;

}

.mv-pointer{

    cursor:pointer;

}

/*==========================================================
FIN MULTIMEDIA VIEWER
==========================================================*/