h2, h3 {
    font-family: inherit;
    font-weight: bold;
}

.xdrone-pantalla-inicial { text-align: center; }

.xdrone-respuestas {
    margin-top: 20px;
}

.xdrone-respuesta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
}

.xdrone-respuesta input[type="radio"] {
    flex: 0 0 auto;
    margin-top: 4px;
}

.xdrone-respuesta span {
    flex: 1 1 auto;
}

.xdrone-boton-confirmar {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 24px;
    cursor: pointer;
}

.xdrone-cronometro {
    margin-bottom: 20px;
    font-weight: 600;
}

.xdrone-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/*
 * =========================================================
 * TEST A PANTALLA COMPLETA EN MÓVIL Y TABLET
 * =========================================================
 */

@media (max-width: 1024px) {

    .xdrone-test.xdrone-test-activo {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;

        margin: 0;
        padding:
            max(20px, env(safe-area-inset-top))
            max(20px, env(safe-area-inset-right))
            max(20px, env(safe-area-inset-bottom))
            max(20px, env(safe-area-inset-left));

        box-sizing: border-box;

        overflow-y: auto;
        overflow-x: hidden;

        z-index: 99999;

        background: #ffffff;
    }

    .xdrone-acciones {
        flex-direction: column;
        align-items: stretch;
    }

    .xdrone-acciones button {
        width: 100%;
        box-sizing: border-box;
    }

    .xdrone-boton-confirmar {
        width: 100%;
        box-sizing: border-box;
    }

    .xdrone-boton-siguiente {
        width: 100%;
        box-sizing: border-box;
    }

    .xdrone-test.xdrone-historial-activo {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;

        margin: 0;

        padding:
            max(20px, env(safe-area-inset-top))
            max(20px, env(safe-area-inset-right))
            max(20px, env(safe-area-inset-bottom))
            max(20px, env(safe-area-inset-left));

        box-sizing: border-box;

        overflow-y: auto;
        overflow-x: hidden;

        z-index: 99999;

        background: #ffffff;
    }

    .xdrone-contenedor-grafico,
    .xdrone-contenedor-tabla {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
    }

    .xdrone-grafico-progreso {
        display: block;
        min-width: 800px;
        height: auto;
    }

    /*
     * En móvil y tablet mostramos
     * el botón de alternancia.
     */
    .xdrone-boton-alternar-progreso {
        display: inline-block !important;
    }

    /*
     * En móvil y tablet la tabla permanece
     * oculta inicialmente.
     */
        .xdrone-contenedor-grafico {
        display: block;
    }

    .xdrone-contenedor-tabla {
        display: none;
    }

    .xdrone-contenedor-grafico:not(.xdrone-progreso-visible) {
        display: none;
    }

    .xdrone-contenedor-tabla.xdrone-progreso-visible {
        display: block;
    }

    .xdrone-boton-repetir,
    .xdrone-boton-progreso-final,
    .xdrone-boton-alternar-progreso,
    .xdrone-boton-salir {
        width: 100%;
        max-width: 300px;
        box-sizing: border-box;
    }

    .xdrone-acciones-progreso { flex-direction: column; align-items: flex-start; }
}

.xdrone-resultado-respuesta {
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 16px;
}

.xdrone-respuesta-correcta {
    color: #047857;
}

.xdrone-respuesta-incorrecta {
    color: #b91c1c;
}

.xdrone-resultado-test {
    margin-top: 30px;
    margin-bottom: 30px;
}

.xdrone-resultado-test h3 {
    margin-bottom: 15px;
}

.xdrone-barra-resultado {
    width: 100%;
    height: 30px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.xdrone-barra-resultado-progreso {
    height: 100%;
    width: 0;
    background: #047857;
    transition: width 0.5s ease;
}

.xdrone-resultado-test p {
    margin-top: 10px;
    font-weight: 600;
    text-align: center;
}

.xdrone-acciones-final {
    margin-top: 20px;
}

.xdrone-boton-repetir,
.xdrone-boton-progreso-final {
    padding: 12px 24px;
    cursor: pointer;
}

.xdrone-acciones-progreso {
    justify-content: flex-start;
    margin-bottom: 20px;
}

.xdrone-contenedor-grafico {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.xdrone-eje-y {
    flex: 0 0 60px;
    width: 60px;
    min-width: 60px;
    height: 400px;
    display: block;
    position: relative;
    z-index: 2;
}
.xdrone-grafico-scroll {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 418px;
    margin-bottom: 15px;
}
.xdrone-grafico-scroll canvas {
    display: block;
    height: 400px;
    max-width: none;
}

.xdrone-boton-alternar-progreso {
    display: none;
}

.xdrone-pregunta-texto {
    white-space: pre-line;
}