/* =======================================
   1. CONTROL DE SCROLL Y TRANSICIÓN DE MODAL
   ======================================= */
body.modal-active {
    overflow: hidden; 
}

.modal-overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; 
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.modal-overlay.modal-visible {
    opacity: 1;
}

/* =======================================
   2. CONTENEDOR DE IMAGEN Y PANEADO
   ======================================= */
.zoom-container {
    width: 90vw; 
    height: 90vh; 
    overflow: hidden; 
    scroll-behavior: smooth;
    cursor: grab;  
    position: relative; 
}

.zoom-inner {
    display: inline-block;
    position: relative;
}

.zoomed-content {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.2s ease-out;
    transform-origin: top left; 
}

/* Cursor mientras se arrastra */
.zoom-container.pan-active {
    cursor: grabbing;
}

/* =======================================
   3. BOTONES DE NAVEGACIÓN (LATERALES)
   ======================================= */
.nav-btn {
    position: absolute;
    top: 50%; 
    transform: translateY(-50%);
    padding: 15px 10px;
    background-color: rgba(0, 0, 0, 0.5); 
    color: white;
    border: none;
    cursor: pointer;
    font-size: 24px;
    z-index: 1010;
    border-radius: 0;
    transition: background-color 0.2s;
}

.nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev-btn {
    left: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.next-btn {
    right: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* =======================================
   4. CONTROLES DE ZOOM Y CIERRE (SUPERIORES)
   ======================================= */
.zoom-controls-top {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1010;
}

.zoom-btn {
    padding: 10px;
    width: 40px;
    height: 40px;
    background-color: rgba(50, 50, 50, 0.7); 
    color: white;
    border: none;
    border-radius: 50%; 
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background-color 0.2s;
    display: flex; 
    justify-content: center;
    align-items: center;
}

.zoom-btn:hover {
    background-color: rgba(50, 50, 50, 1.0);
}

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

#video-container {
        max-width: 800px;
        margin: 20px auto;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .tab-buttons {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .tab-buttons li {
        margin-right: 10px;
        cursor: pointer;
        padding: 8px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        border-radius: 4px;
    }

    .tab-buttons li.active {
        background-color: #d99f00;
        color: #fff;
    }

    /**-- BOTONES MEGA DRIVE MEDIAFIRE --**/
    .ab-download {
        display: inline-block;
        font-family: Arial;
        background: #FCFCFC;
        text-align: center;
        border: 1px solid #dadada;
        box-shadow: 0 2px 1px #dadada;
        margin: 30px 40px;
        padding: 15px;
        border-radius: 10px;
        min-width: 100px;
    }

    .ab-icon {
        display: block;
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }

    .ab-name {
        color: #222;
        font-style: italic;
    }

    .ab-size {
        display: block;
        padding: 10px;
        font-size: 11px;
        color: #888;
    }

    .download-message {
        display: block;
        margin: 0 -30px;
        cursor: pointer;
        background: rgba(6, 127, 124, 1);
        background: linear-gradient(rgb(39, 185, 182), rgba(6, 127, 124, 1));
        box-shadow: 0 2px 0 rgb(6, 127, 124);
        text-align: center;
        padding: 15px;
        color: white !important;
        font-weight: bold;
    }

    .download-message:hover {
        box-shadow: 0 0 4px rgba(6, 127, 124, 0.4);
    }

    /*Tipos de archivo*/
    .drive {
        background: url(https://lh3.googleusercontent.com/-GMTJJ4ofPBQ/UmxlDLPuT5I/AAAAAAAADZ0/0GX-b3BNYf0/s80-no/godrive.png) no-repeat center;
    }

    .mediafire {
        background: url(https://lh3.googleusercontent.com/-n63r8jw0F-4/Umx6k3-13KI/AAAAAAAADaY/yv6N8MONfkY/s80-no/mfire.png) no-repeat center;
    }

    .mega {
        background: url(https://lh6.googleusercontent.com/-_DIUrAZBfOo/VReDeu80xUI/AAAAAAAABR0/_t3kP5zG_fs/s89-no/mega.png) no-repeat center;
    }

    .share {
        background: url(https://lh4.googleusercontent.com/-b83Uq52L2vo/Umx6iOMrC2I/AAAAAAAADaQ/dwef_ropQvQ/s80-no/4shared.png) no-repeat center;
    }

    .download {
        background: url(https://lh3.googleusercontent.com/-Lsvk42dJBAI/U3515p_cUoI/AAAAAAAAAxE/mLmZkpk58Aw/s80-no/download.png) no-repeat center;
    }
    .terabox {
        background: url(https://tecnoku.duckdns.org/admin/uploads/version/e7eb00c79829_80x80.webp) no-repeat center;
    }

    /**-- HORIZONTAL --**/
    .horizontal {
        display: flex;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
    }

    /* Responsive para pantallas pequeñas */
    @media (max-width: 768px) {
        .horizontal {
            flex-direction: column !important;
        }
    }