/*
 * Prueba local de responsividad para MiClase.
 */

@media screen and (max-width: 860px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /*
     * Contenedor principal.
     */
    .wrap-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /*
     * Tanto el menú como el contenido ocuparán todo el ancho,
     * pero solamente se mostrará uno a la vez.
     */
    .wrap-panel .wrap-sidebar,
    .wrap-panel .wrap-content {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /*
     * Estado normal:
     * ocultar menú y mostrar la clase.
     */
    .wrap-panel .wrap-sidebar {
        display: none !important;
        padding: 40px 0 20px !important;
    }

    .wrap-panel .wrap-content {
        display: block !important;
    }

    /*
     * Estado con la clase "effect":
     * mostrar menú y ocultar contenido.
     */
    .wrap-panel.effect .wrap-sidebar {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .wrap-panel.effect .wrap-content {
        display: none !important;
    }

    /*
     * Botón para cerrar el menú.
     */
    .wrap-panel.effect .wrap-sidebar .bars-show {
        display: block !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        z-index: 10;
    }

    /*
     * Botón para abrir el menú.
     */
    .wrap-panel:not(.effect) .wrap-content .bars-show {
        display: block !important;
    }

    /*
     * Menú lateral responsivo.
     */
    .wrap-sidebar .sidebar-nav,
    .wrap-sidebar .nav-item,
    .wrap-sidebar .nav-submenu {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wrap-sidebar .nav-item-title,
    .wrap-sidebar .child a {
        display: block;
        width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    /*
     * Contenido de las lecciones y ejercicios.
     */
    .wrap-content .panel-items,
    .wrap-content .panel-item,
    .wrap-content .form-items,
    .wrap-content .form-list,
    .wrap-content .options-list,
    .wrap-content .control-input,
    .wrap-content .question,
    .wrap-content .material {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .wrap-content .panel-item {
        padding: 10px !important;
        overflow-x: auto;
    }

    .wrap-content .heading {
        padding-left: 40px !important;
    }

    .wrap-content .options-list {
        padding-right: 0 !important;
        padding-left: 10px !important;
    }

    .wrap-content .form-items .list-qns {
        padding-left: 10px !important;
    }

    /*
     * Recursos que podrían desbordarse.
     */
    .wrap-content img,
    .wrap-content video {
        max-width: 100% !important;
        height: auto !important;
    }

    .wrap-content iframe {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wrap-content .MathJax_Display,
    .wrap-content .MJXc-display,
    .wrap-content mjx-container {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
}