/* ========================================
   Opus Pro Responsive Fix v2 - Sin Transform Scale
   Solución para clicks desalineados en iframes
   ======================================== */

/* Contenedor wrapper responsivo */
.opus-responsive-wrapper {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Reset de transform y zoom en todos los iframes */
iframe[src*="contenido-lecciones"],
iframe[src*=".htm"],
.learndash-wrapper iframe {
    transform: none !important;
    zoom: normal !important;
    -moz-transform: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Contenedor principal de Opus - sin escalado */
div[style*="width:1050px"][style*="height:450px"] {
    width: 100% !important;
    max-width: 1050px !important;
    height: auto !important;
    min-height: 300px !important;
    margin: 0 auto !important;
    transform: none !important;
    zoom: normal !important;
}

/* Contenedor interno de Opus */
div[id^="_"][id$="_PR_"] {
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    position: relative !important;
    transform: none !important;
    zoom: normal !important;
}

/* Media Queries con dimensiones reales */

/* Desktop */
@media screen and (min-width: 1051px) {
    .opus-responsive-wrapper iframe {
        width: 1050px !important;
        height: 450px !important;
    }
}

/* Tablets (landscape) */
@media screen and (min-width: 768px) and (max-width: 1050px) {
    .opus-responsive-wrapper iframe {
        width: calc(100vw - 40px) !important;
        height: calc((100vw - 40px) * 0.4286) !important; /* Mantener aspect ratio */
        max-width: 1050px !important;
        min-height: 350px !important;
    }
}

/* Tablets (portrait) y móviles grandes */
@media screen and (min-width: 481px) and (max-width: 767px) {
    .opus-responsive-wrapper iframe {
        width: calc(100vw - 30px) !important;
        height: calc((100vw - 30px) * 0.5) !important;
        min-height: 300px !important;
    }
    
    /* Ajustar tamaño de fuente del contenido */
    div[id^="_"][id$="_PR_"] {
        font-size: 14px !important;
    }
}

/* Mobile (landscape) */
@media screen and (max-width: 896px) and (orientation: landscape) {
    .opus-responsive-wrapper {
        margin-top: 60px !important; /* Espacio para controles de LearnDash */
    }
    
    .opus-responsive-wrapper iframe {
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 150px) !important; /* Altura ajustada al viewport */
        max-height: 400px !important;
        min-height: 250px !important;
    }
    
    /* Mantener controles de navegación visibles */
    .ld-course-navigation,
    .ld-focus-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* Mobile (portrait) */
@media screen and (max-width: 480px) {
    .opus-responsive-wrapper iframe {
        width: calc(100vw - 20px) !important;
        height: calc((100vw - 20px) * 0.6) !important;
        min-height: 280px !important;
        max-height: 400px !important;
    }
    
    /* Contenido más pequeño en móviles */
    div[id^="_"][id$="_PR_"] {
        font-size: 13px !important;
    }
    
    /* Botones más grandes para touch */
    div[id^="_"][id$="_PR_"] button,
    div[id^="_"][id$="_PR_"] a,
    div[id^="_"][id$="_PR_"] input[type="button"],
    div[id^="_"][id$="_PR_"] input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
}

/* Mobile muy pequeño */
@media screen and (max-width: 360px) {
    .opus-responsive-wrapper iframe {
        width: calc(100vw - 10px) !important;
        height: calc((100vw - 10px) * 0.7) !important;
        min-height: 250px !important;
    }
}

/* Eliminar cualquier overflow que corte el contenido */
.learndash-wrapper,
.ld-course-content,
.ld-lesson-content,
.ld-topic-content,
.entry-content {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Asegurar que las imágenes sean responsive */
div[id^="_"][id$="_PR_"] img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix para elementos con posición absoluta dentro del contenido */
div[id^="_"][id$="_PR_"] div[style*="position:absolute"] {
    position: relative !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Eliminar márgenes negativos que puedan causar problemas */
div[style*="width:1050px"][style*="height:450px"],
.opus-responsive-wrapper,
.opus-iframe-container {
    margin-bottom: 0 !important;
}

/* Debug: Mostrar bordes para verificar alineación (comentar en producción) */
/*
.opus-responsive-wrapper {
    border: 2px solid blue !important;
}
.opus-responsive-wrapper iframe {
    border: 2px solid red !important;
}
*/

/* Importante: Override cualquier estilo inline problemático */
iframe[style*="transform"],
iframe[style*="zoom"] {
    transform: none !important;
    zoom: normal !important;
}

/* Prevenir zoom no deseado en iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input, select, textarea {
        font-size: 16px !important;
    }
}