/**
 * Fix Responsive para Contenido de Lecciones Opus Pro
 * Versión 2.0 - Escala proporcional forzada
 * 
 * Este CSS fuerza el contenido de 1050px a escalar proporcionalmente
 * al ancho disponible del viewport
 */

/* Prevenir scroll horizontal en toda la página */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* SOLUCIÓN PRINCIPAL: Escalar el contenido completo */
/* Aplicar a TODOS los contenedores de 1050px, sin importar su ubicación */
#__PRUEBAS,
#_0_PR_,
div[style*="width:1050px"],
div[style*="width: 1050px"],
div[style*="width:1050px;"],
div[style*="width: 1050px;"] {
    /* Mantener dimensiones originales pero escalar visualmente */
    width: 1050px !important;
    height: 450px !important;
    transform-origin: top left !important;
    position: relative !important;
}

/* Fix específico para estructura anidada (div#__PRUEBAS > div#_0_PR_) */
#__PRUEBAS > #_0_PR_ {
    /* El div interno debe ocupar todo el espacio del padre */
    width: 1050px !important;
    height: 450px !important;
    position: relative !important;
    transform: none !important; /* No aplicar doble transformación */
}

/* Escala dinámica basada en el ancho disponible */
@media screen and (max-width: 1049px) {
    /* Selector más amplio para capturar TODOS los divs de 1050px */
    #__PRUEBAS,
    #_0_PR_,
    div[style*="width:1050px"],
    div[style*="width: 1050px"],
    div[style*="width:1050px;"],
    div[style*="width: 1050px;"],
    /* Específico para el contenedor padre de lesson-02 */
    body > div[style*="1050"],
    .entry-content div[style*="1050"],
    .ld-content-container div[style*="1050"],
    /* Para iframes que contengan este contenido */
    iframe ~ div[style*="1050"] {
        /* Calcular escala: ancho_viewport / ancho_original */
        transform: scale(calc(100vw / 1050)) !important;
        /* Ajustar margen negativo para compensar el espacio original */
        margin-bottom: calc(-450px + (450px * (100vw / 1050))) !important;
    }
    
    
    /* Fix específico para el contenedor interno de lesson-02 */
    div[style*="width:1050px"] > div#_0_PR_,
    div[style*="width: 1050px"] > div#_0_PR_ {
        /* Reset transform del hijo para evitar doble escalado */
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        margin-bottom: 0 !important;
    }
}

/* Para contenedores padre - asegurar que no causen overflow */
.learndash-wrapper,
.ld-content-container,
.entry-content,
.ld-item-list-item-preview,
.ld-table-list-item-preview,
article.sfwd-lessons,
article.sfwd-topic,
div.learndash_content_wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
}


/* Si el contenido está dentro de un iframe */
iframe[src*="contenido-lecciones"],
iframe[src*=".htm"] {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
}

/* Contenedor para iframes con aspect ratio fijo */
.responsive-iframe-container,
.opus-iframe-wrapper,
div:has(> iframe[src*="contenido-lecciones"]) {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 42.857% !important; /* 450/1050 = 0.42857 */
    height: 0 !important;
    overflow: hidden !important;
}

.responsive-iframe-container iframe,
.opus-iframe-wrapper iframe,
div:has(> iframe[src*="contenido-lecciones"]) iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: scale(1) !important;
}

/* Móviles pequeños - escala adicional si es necesario */
@media screen and (max-width: 480px) {
    /* El cálculo automático debería funcionar, pero podemos forzar un mínimo */
    #__PRUEBAS,
    #_0_PR_ {
        min-height: calc(450px * 0.457) !important; /* 480/1050 = 0.457 */
    }
}

/* Fix específico para elementos internos con position absolute */
#__PRUEBAS div[style*="position:absolute"],
#__PRUEBAS div[style*="position: absolute"],
#_0_PR_ div[style*="position:absolute"],
#_0_PR_ div[style*="position: absolute"] {
    /* Los elementos internos mantienen su posición relativa al contenedor escalado */
    /* No necesitan ajustes adicionales gracias al transform del padre */
}

/* Asegurar que el contenido escalado sea interactivo */
#__PRUEBAS,
#_0_PR_ {
    pointer-events: auto !important;
}

/* Debug: Añadir borde para visualizar el contenedor (comentar en producción) */
/*
#__PRUEBAS,
#_0_PR_ {
    border: 2px solid red !important;
}
*/

/* Fallback para navegadores que no soporten calc() en transform */
@supports not (transform: scale(calc(100vw / 1050))) {
    @media screen and (max-width: 768px) {
        #__PRUEBAS,
        #_0_PR_ {
            transform: scale(0.73) !important; /* 768/1050 */
        }
    }
    
    @media screen and (max-width: 480px) {
        #__PRUEBAS,
        #_0_PR_ {
            transform: scale(0.457) !important; /* 480/1050 */
        }
    }
    
    @media screen and (max-width: 375px) {
        #__PRUEBAS,
        #_0_PR_ {
            transform: scale(0.357) !important; /* 375/1050 */
        }
    }
}

/* Importante: Si hay múltiples instancias en la misma página */
#__PRUEBAS + #__PRUEBAS,
#_0_PR_ + #_0_PR_ {
    margin-top: 20px !important;
}

/* Fix específico para el wrapper del iframe en LearnDash */
.opus-iframe-wrapper-fixed {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

/* Asegurar que LearnDash respete el espacio del iframe */
.learndash-wrapper {
    position: relative !important;
    clear: both !important;
}

.ld-lesson-topic-list {
    position: relative !important;
    margin-top: 10px !important;
}

/* Fix para el mensaje NoHTML5 */
#__NoHTML5 {
    position: relative !important;
    width: 90% !important;
    max-width: 600px !important;
    margin: 20px auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}